Group Doc Viewer In .NET

Group Doc: HTML5 document viewer

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

Work on a Windows Server and with .NET.
Support a new and Old Version of Pdf.
Support Microsoft Office Documents.
Support Tiff File.
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:

Clean and lightweight.
Easy to use Dll.
Has many options for a user like printing, open other files, zoom in / out, etc.
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.

13 Comments

Join the conversation! Your thoughts help the community grow.

Từ Công Hiếu5y ago
Thanks you for this post. Can you share theo code in [email protected]
rajesh choudhary6y ago
Great post can u share the Code in [email protected]
yogesh thakkar7y ago
Hello nice post but i am not able to run it i got the Groupdocs.Web.UI namspace error and could not solve this error. so can you please send me the code on [email protected] asap.
Richa Patel8y ago
I was implemented the same as given above code. but I was unable to reproduce the viewer on screen. and there were no errors showing in the console. Can you pls suggest me what is the issue in my code. Can you send me your demo project in my Email: [email protected]
Nguyen 09y ago
Thanks for shareing. You send code for me . Email : [email protected]
Sonu Chaudhary10y ago
good one!
Santhakumar Munuswamy10y ago
Thanks for nice share
Muhammad Aqib Shehzad10y ago
nice sharing dear
Mohsin Azam10y ago
Thanks All...
Kumaresh Rajalingam10y ago
Good one
Ankit Saxena10y ago
Good Info... Thanks for sharing.
Humayun Kabir Mamun10y ago
Nice...
Raja T10y ago
Nice,thanks for sharing