Group Doc Viewer In .NET

Group Doc: HTML5 document viewer

My search starts when we need a Document Viewer in our project that will:

1. Work on a Windows Server and with .NET.
2. Support a new and Old Version of Pdf.
3. Support Microsoft Office Documents.
4. Support Tiff File.
5. Image File Support and many others.

We have checked many APIs, DLLs, and SDK, but the one who caught our attention is GroupDoc Viewer for .NET.

Firstly, I will demonstrate why one choose this option.

Group Doc is:

1. Clean and lightweight.
2. Easy to use Dll.
3. Has many options for a user like printing, open other files, zoom in / out, etc.
4. Support for 50+ file types.

From points 1 and 2 we have to add groupdoc dll in our application.

Now I will illustrate how to use Group Doc code for getting our desired outcome.

Step 1: Add dll in Add Reference in Bin folder.

Step 2: Add the following to Global.asax.

Viewer.InitRoutes();
Viewer.SetRootStoragePath(Server.MapPath("~/testfiles/")); // Documents will also be cached here
Viewer.SetLicensePath(Server.MapPath("SomePathToYourLisenceFile")); //in our case its free/unlicence dll :)
//Remember testfiles is just a folder which contains your different documents like abc.pdf,xyz.tif etc. I have added these files below in step-7.

Step 3: Add some handlers to System.Web in Web.Config.

<httpHandlers>
    <add verb="GET,POST" path="document-viewer/ViewDocumentHandler" type="Groupdocs.Web.UI.Handlers.ViewDocumentHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />
    <add verb="*" path="document-viewer/GetDocumentPageImageHandler" type="Groupdocs.Web.UI.Handlers.GetDocumentPageImageHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />
    <add verb="*" path="document-viewer/LoadFileBrowserTreeDataHandler" type="Groupdocs.Web.UI.Handlers.LoadFileBrowserTreeDataHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />
    <add verb="*" path="document-viewer/GetImageUrlsHandler" type="Groupdocs.Web.UI.Handlers.GetImageUrlsHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />
    <add verb="GET" path="document-viewer/CSS/GetCssHandler" type="Groupdocs.Web.UI.Handlers.CssHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />
    <add verb="GET" path="document-viewer/images/*" type="Groupdocs.Web.UI.Handlers.EmbeddedImageHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />
    <add verb="GET" path="document-viewer/fonts/*" type="Groupdocs.Web.UI.Handlers.GetFontHandler, Groupdocs.Viewer, Culture=neutral" />
    <add verb="GET,POST" path="document-viewer/GetScriptHandler" type="Groupdocs.Web.UI.Handlers.ScriptHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />
    <add verb="GET" path="document-viewer/GetFileHandler" type="Groupdocs.Web.UI.Handlers.GetFileHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />
    <add verb="GET,POST" path="document-viewer/GetPdf2JavaScriptHandler" type="Groupdocs.Web.UI.Handlers.GetPdf2JavaScriptHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />
    <add verb="GET,POST" path="document-viewer/GetPdfWithPrintDialogHandler" type="Groupdocs.Web.UI.Handlers.GetPdfWithPrintDialogHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />
    <add verb="GET,POST" path="document-viewer/GetPrintableHtmlHandler" type="Groupdocs.Web.UI.Handlers.GetPrintableHtmlHandler, Groupdocs.Viewer, Culture=neutral" />
    <add verb="GET,POST" path="document-viewer/GetResourceForHtmlHandler" type="Groupdocs.Web.UI.Handlers.GetResourceForHtmlHandler, Groupdocs.Viewer, Culture=neutral" />
    <add verb="GET,POST" path="document-viewer/GetDocumentPageHtmlHandler" type="Groupdocs.Web.UI.Handlers.GetDocumentPageHtmlHandler, Groupdocs.Viewer, Culture=neutral" />
    <add verb="GET,POST" path="document-viewer/ReorderPageHandler" type="Groupdocs.Web.UI.Handlers.ReorderPageHandler, Groupdocs.Viewer, Culture=neutral" />
    <add verb="GET,POST" path="document-viewer/RotatePageHandler" type="Groupdocs.Web.UI.Handlers.RotatePageHandler, Groupdocs.Viewer, Culture=neutral" />
</httpHandlers>

Step 4: Add a new WebForm item like Default.aspx and after page title tag add the following:

<%@ Import Namespace="System.NET" %>
<%@ Import Namespace="Groupdocs.Web.UI" %>

Step 5: Add this following line in your .master file and if there is no .master file,  then add it on your page.

//To Load Jquery.
<%= Viewer.CreateScriptLoadBlock().LoadJquery().LoadJqueryUi() %>

Step 6: Add divs to show your document out in the viewer.

<div id="pdf" style="width: 900px; height: 500px; position: relative; margin-bottom: 20px;"></div>
<div id="excel" style="width: 900px; height: 500px; position: relative; background-color: gray"></div>
<div id="image" style="width: 900px; height: 500px; position: relative; background-color: gray"></div>
<div id="tiff" style="width: 900px; height: 500px; position: relative; background-color: gray"></div>
<div id="txt" style="width: 900px; height: 500px; position: relative; background-color: gray"></div>
<div id="rtf" style="width: 900px; height: 500px; position: relative; background-color: gray"></div>
<div id="word" style="width: 900px; height: 500px; position: relative; background-color: gray"></div>
<div id="png" style="width: 900px; height: 500px; position: relative; background-color: gray"></div>

Step 7: Add this after div section ends.

<%--pdf--%>
<%= Viewer.ClientCode()
   .TargetElementSelector("#pdf")
   .FilePath("candy.pdf")
   .ZoomToFitWidth()
   .Width(900)
   .Height(400)
%>
<%--Excel--%>
<%= Viewer.ClientCode()
   .TargetElementSelector("#excel")
   .FilePath("Timesheet.xls")
   .OpenThumbnails(false)
   .Width(900)
   .Height(400)
   .ZoomToFitHeight()
   .Locale("nb-NO")
   .BackgroundColor("#777")
   .UseHtmlBasedEngine()
%>
<%--JPG--%>
<%= Viewer.ClientCode()
   .TargetElementSelector("#image")
   .FilePath("image.jpg")
   .OpenThumbnails(false)
   .ZoomToFitHeight()
   .Locale("nb-NO")
   .BackgroundColor("#777")
   .UseHtmlBasedEngine()
%>
<%--tiffFile--%>
<%= Viewer.ClientCode()
   .TargetElementSelector("#tiff")
   .FilePath("as.tif")
   .OpenThumbnails(false)
   .ZoomToFitHeight()
   .Width(900)
   .Height(400)
   .Locale("nb-NO")
   .BackgroundColor("#777")
   .UseHtmlBasedEngine()
%>
<%--txt File--%>
<%= Viewer.ClientCode()
   .TargetElementSelector("#txt")
   .FilePath("Txt.txt")
   .OpenThumbnails(false)
   .ZoomToFitHeight()
   .Width(900)
   .Height(400)
   .Locale("nb-NO")
   .BackgroundColor("#777")
   .UseHtmlBasedEngine()
%>
<%--rtf File--%>
<%= Viewer.ClientCode()
   .TargetElementSelector("#rtf")
   .FilePath("RTF.rtf")
   .OpenThumbnails(false)
   .ZoomToFitHeight()
   .Width(900)
   .Height(400)
   .Locale("nb-NO")
   .BackgroundColor("#777")
   .UseHtmlBasedEngine()
%>
<%--wordFile--%>
<%= Viewer.ClientCode()
   .TargetElementSelector("#word")
   .FilePath("word.doc")
   .OpenThumbnails(false)
   .ZoomToFitHeight()
   .Width(900)
   .Height(400)
   .Locale("nb-NO")
   .BackgroundColor("#777")
   .UseHtmlBasedEngine()
%>
<%--PNG File--%>
<%= Viewer.ClientCode()
   .TargetElementSelector("#png")
   .FilePath("png.png")
   .OpenThumbnails(false)
   .ZoomToFitHeight()
   .Width(900)
   .Height(400)
   .Locale("nb-NO")
   .BackgroundColor("#777")
   .UseHtmlBasedEngine()
%>

<%--Encrypted EXCEL File--%>
<%= Viewer.ClientCode()
   .TargetElementSelector("#encrpt-excel")
   .FilePath("EXCEL.xlsx")
   .OpenThumbnails(false)
   .ZoomToFitHeight()
   .Width(900)
   .Height(400)
   .Locale("nb-NO")
   .BackgroundColor("#777")
   .UseHtmlBasedEngine()
%>

After saving and building your project you will see the output of the files in View Form.

Note: Check the ViewerClass, it contains the ClientHelper method, which has many properties. You can use this option according to your need.