.NET

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 Versions 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 user like printing, open other files, zoom in / out, etc.
  4. Support to 50+ file types.

From point 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.

  1. Viewer.InitRoutes();  
  2. Viewer.SetRootStoragePath(Server.MapPath("~/testfiles/")); // Documents will also be cached here  
  3. Viewer.SetLicensePath(Server.MapPath("SomePathToYourLisenceFile")); //in our case its free/unlicence dll :)  
  4. //Remember testfiles is just folder which contains your different document like abc.pdf,xyz.tif etc.i have add these files below in step-7.  
Step 3: Add some handlers in System.Web in Web.Config.
  1. <httpHandlers>  
  2.     <add verb="GET,POST" path="document-viewer/ViewDocumentHandler" type="Groupdocs.Web.UI.Handlers.ViewDocumentHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />  
  3.     <add verb="*" path="document-viewer/GetDocumentPageImageHandler" type="Groupdocs.Web.UI.Handlers.GetDocumentPageImageHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />  
  4.     <add verb="*" path="document-viewer/LoadFileBrowserTreeDataHandler" type="Groupdocs.Web.UI.Handlers.LoadFileBrowserTreeDataHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />  
  5.     <add verb="*" path="document-viewer/GetImageUrlsHandler" type="Groupdocs.Web.UI.Handlers.GetImageUrlsHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />  
  6.     <add verb="GET" path="document-viewer/CSS/GetCssHandler" type="Groupdocs.Web.UI.Handlers.CssHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />  
  7.     <add verb="GET" path="document-viewer/images/*" type="Groupdocs.Web.UI.Handlers.EmbeddedImageHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />  
  8.     <add verb="GET" path="document-viewer/fonts/*" type="Groupdocs.Web.UI.Handlers.GetFontHandler, Groupdocs.Viewer, Culture=neutral" />  
  9.     <add verb="GET,POST" path="document-viewer/GetScriptHandler" type="Groupdocs.Web.UI.Handlers.ScriptHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />  
  10.     <add verb="GET" path="document-viewer/GetFileHandler" type="Groupdocs.Web.UI.Handlers.GetFileHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />  
  11.     <add verb="GET,POST" path="document-viewer/GetPdf2JavaScriptHandler" type="Groupdocs.Web.UI.Handlers.GetPdf2JavaScriptHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />  
  12.     <add verb="GET,POST" path="document-viewer/GetPdfWithPrintDialogHandler" type="Groupdocs.Web.UI.Handlers.GetPdfWithPrintDialogHandler, Groupdocs.Viewer, Culture=neutral" validate="false" />  
  13.     <add verb="GET,POST" path="document-viewer/GetPrintableHtmlHandler" type="Groupdocs.Web.UI.Handlers.GetPrintableHtmlHandler, Groupdocs.Viewer, Culture=neutral" />  
  14.     <add verb="GET,POST" path="document-viewer/GetResourceForHtmlHandler" type="Groupdocs.Web.UI.Handlers.GetResourceForHtmlHandler, Groupdocs.Viewer, Culture=neutral" />  
  15.     <add verb="GET,POST" path="document-viewer/GetDocumentPageHtmlHandler" type="Groupdocs.Web.UI.Handlers.GetDocumentPageHtmlHandler, Groupdocs.Viewer, Culture=neutral" />  
  16.     <add verb="GET,POST" path="document-viewer/ReorderPageHandler" type="Groupdocs.Web.UI.Handlers.ReorderPageHandler, Groupdocs.Viewer, Culture=neutral" />  
  17.     <add verb="GET,POST" path="document-viewer/RotatePageHandler" type="Groupdocs.Web.UI.Handlers.RotatePageHandler, Groupdocs.Viewer, Culture=neutral" />   
  18. </httpHandlers>  
Step 4: Add a new WebForm item like Default.aspx and after page title tag add the following:
  1. <%@ Import Namespace="System.NET" %>   
  2. <%@ 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.
  1. //To Load Jquery.  
  2. <%= Viewer.CreateScriptLoadBlock().LoadJquery().LoadJqueryUi() %>   
Step 6: Add divs to show your document out in viewer.
  1. <div id="pdf" style="width: 900px; height: 500px; position: relative; margin-bottom: 20px;"></div>    
  2. <div id="excel" style="width: 900px; height: 500px; position: relative; background-color: gray"></div>    
  3. <div id="image" style="width: 900px; height: 500px; position: relative; background-color: gray"></div>    
  4. <div id="tiff" style="width: 900px; height: 500px; position: relative; background-color: gray"></div>    
  5. <div id="txt" style="width: 900px; height: 500px; position: relative; background-color: gray"></div>    
  6. <div id="rtf" style="width: 900px; height: 500px; position: relative; background-color: gray"></div>    
  7. <div id="word" style="width: 900px; height: 500px; position: relative; background-color: gray"></div>    
  8. <div id="png" style="width: 900px; height: 500px; position: relative; background-color: gray"></div>   
Step 7: Add this after div section ends.

 

  1. <%--pdf--%>    
  2. <%= Viewer.ClientCode()    
  3.    .TargetElementSelector("#pdf")    
  4.    .FilePath("candy.pdf")    
  5.    .ZoomToFitWidth()    
  6.    .Width(900)    
  7.    .Height(400)    
  8. %>    
  9. <%--Excel--%>    
  10. <%= Viewer.ClientCode()    
  11.    .TargetElementSelector("#excel")    
  12.    .FilePath("Timesheet.xls")    
  13.    .OpenThumbnails(false)    
  14.    .Width(900)    
  15.    .Height(400)    
  16.    .ZoomToFitHeight()    
  17.    .Locale("nb-NO")    
  18.    .BackgroundColor("#777")    
  19.    .UseHtmlBasedEngine()    
  20. %>    
  21. <%--JPG--%>    
  22. <%= Viewer.ClientCode()    
  23.    .TargetElementSelector("#image")    
  24.    .FilePath("image.jpg")    
  25.    .OpenThumbnails(false)    
  26.    .ZoomToFitHeight()    
  27.    .Locale("nb-NO")    
  28.    .BackgroundColor("#777")    
  29.    .UseHtmlBasedEngine()    
  30. %>    
  31. <%--tiffFile--%>    
  32. <%= Viewer.ClientCode()    
  33.    .TargetElementSelector("#tiff")    
  34.    .FilePath("as.tif")    
  35.    .OpenThumbnails(false)    
  36.    .ZoomToFitHeight()    
  37.    .Width(900)    
  38.    .Height(400)    
  39.    .Locale("nb-NO")    
  40.    .BackgroundColor("#777")    
  41.    .UseHtmlBasedEngine()    
  42. %>    
  43. <%--txt File--%>    
  44. <%= Viewer.ClientCode()    
  45.    .TargetElementSelector("#txt")    
  46.    .FilePath("Txt.txt")    
  47.    .OpenThumbnails(false)    
  48.    .ZoomToFitHeight()    
  49.    .Width(900)    
  50.    .Height(400)    
  51.    .Locale("nb-NO")    
  52.    .BackgroundColor("#777")    
  53.    .UseHtmlBasedEngine()    
  54. %>    
  55. <%--rtf File--%>    
  56. <%= Viewer.ClientCode()    
  57.    .TargetElementSelector("#rtf")    
  58.    .FilePath("RTF.rtf")    
  59.    .OpenThumbnails(false)    
  60.    .ZoomToFitHeight()    
  61.    .Width(900)    
  62.    .Height(400)    
  63.    .Locale("nb-NO")    
  64.    .BackgroundColor("#777")    
  65.    .UseHtmlBasedEngine()    
  66. %>    
  67. <%--wordFile--%>    
  68. <%= Viewer.ClientCode()    
  69.    .TargetElementSelector("#word")    
  70.    .FilePath("word.doc")    
  71.    .OpenThumbnails(false)    
  72.    .ZoomToFitHeight()    
  73.    .Width(900)    
  74.    .Height(400)    
  75.    .Locale("nb-NO")    
  76.    .BackgroundColor("#777")    
  77.    .UseHtmlBasedEngine()    
  78. %>    
  79. <%--PNG File--%>    
  80. <%= Viewer.ClientCode()    
  81.    .TargetElementSelector("#png")    
  82.    .FilePath("png.png")    
  83.    .OpenThumbnails(false)    
  84.    .ZoomToFitHeight()    
  85.    .Width(900)    
  86.    .Height(400)    
  87.    .Locale("nb-NO")    
  88.    .BackgroundColor("#777")    
  89.    .UseHtmlBasedEngine()    
  90. %>    
  91.     
  92. <%--Encrypted EXCEL File--%>    
  93. <%= Viewer.ClientCode()    
  94.    .TargetElementSelector("#encrpt-excel")    
  95.    .FilePath("EXCEL.xlsx")    
  96.    .OpenThumbnails(false)    
  97.    .ZoomToFitHeight()    
  98.    .Width(900)    
  99.    .Height(400)    
  100.    .Locale("nb-NO")    
  101.    .BackgroundColor("#777")    
  102.    .UseHtmlBasedEngine()    
  103. %>   
Group Doc Viewer

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

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

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs