How to Create PDF Web Viewer

C# PDF Web Viewer Building - Setting Up Project

• Start your Visual Studio (MS VS 2005 or above), create a new Web Site using the ASP.NET empty Web Site template in Visual C#.
• In the References menu, add a new reference to the Yiigo.Image.WebViewer control from the unzipped .NET image SDK that you have downloaded.
• In the Build menu, change your Target Framework to .NET 3.5. In this way, your project will be forced to reopen, and your web.config will be populated.

C# PDF Web Viewer Creation - Adding Project Resources

• Find the document web viewer resources located at: C:\Program Files\Yiigo.Image for.NET\bin\2.0\WebResources\DocumentsWebViewer.
• Now copy the DocumentWebViewer directory into the root of your imaging project.
• Create a new directory named Image in the root of your project to store PDF documents and images displayed by the viewer.

C# PDF Web Viewer - Adding Handler and Your Web page

• Add a handler DocumentWebViewer.ashx to your project so the viewer can communicate with it.
• VS will add a default web handler. Please replace the whole contents in it with the following codes.

<%@WebHandlerLanguage="C#"Class="WebDocViewerHandler"%>
usingSystem;
usingSystem.Web;
usingAtalasoft.Imaging.WebControls;
publicclassWebDocViewerHandler:WebDocumentRequestHandler
{
}

• Now add a new web page to your project, with the name "Default.aspx".
• Add the following lines of html to your document head to create web document viewer objects.

<scriptsrc="WebDocViewer/jquery-1.7.1.min.js"type="text/javascript"></script>
<scriptsrc="WebDocViewer/jquery.easing.1.3.js"type="text/javascript"></script>
<scriptsrc="WebDocViewer/jquery-ui-1.8.14.custom.min.js"type="text/javascript"></script>
<scriptsrc="WebDocViewer/atalaWebDocumentViewer.js"type="text/javascript"></script>
<linkhref="WebDocViewer/atalaWebDocumentViewer.css"rel="Stylesheet"type="text/css"/>

• Now add the following html to your document body to create the document viewing area.

<divid="_toolbar1"class="atala-document-toolbar"style="width:670px;"></div>
<divid="_container1"class="atala-document-container"style="width:670px;height:
500px;"></div>

• Lastly please use the chunk of JavaScript below to initialize your viewer.

<scripttype="text/javascript"language="javascript">
var_docUrl='Images/Example.tif';
var_serverUrl='WebDocViewer.ashx';
var_viewer=newAtalasoft.Controls.WebDocumentViewer({
'parent':$('#_container1'), //parentcontainertoputtheviewerin
'toolbarparent':$('#_toolbar1'), //parentcontainertoputtheviewertoolbarin
'serverurl':_serverUrl, //serverhandlerurltosendimagerequeststo
'documenturl':_docUrl //documenturlrelativetotheserverhandler
url
});
</script>

C# PDF Web Viewer - Deploying to IIS

• Copy your project to a path within your IIS document root.
• Convert your project directory to an Application and assign it to an Application Pool.

C# PDF Web Viewer - Loading your PDF Document

• Now you can navigate to your page, the one with the web viewer embedded, in a browser, and load the PDF document for displaying.
• All the major web browsers are supported, including Chrome, IE, Firefox, Safari, etc.
• You can also make necessary PDF processing with the tools from the web viewer handler, such as zoom-in, zoom-out, annotation-ellipse, line, text, callout, rectangle, freehand, stamp, hotspot, and more for you to discover.
• You can also create Windows PDF Viewer in C# programming.