Document Viewer in Asp.net C#

You can create a Document Viewer application in ASP.NET by using the DocumentViewer object. Here is a tutorial and sample code that highlights how:

// Create the document viewer 
private initDocumentViewer(): void { 
    // Document Viewer Creation Options 
    let createOptions: lt.Document.Viewer.DocumentViewerCreateOptions = new lt.Document.Viewer.DocumentViewerCreateOptions(); 
    createOptions.viewCreateOptions.useElements = false; 
    createOptions.thumbnailsCreateOptions.useElements = false; 
 
    // Set the UI part where the main view is displayed 
    createOptions.viewContainer = document.getElementById("imageViewerDiv"); 
    // Set the UI part where the thumbnails are displayed 
    createOptions.thumbnailsContainer = document.getElementById("thumbnails"); 
    // Set the UI part where the bookmarks are displayed (Set bookmarks container will show them in simple list) 
    createOptions.bookmarksContainer = document.getElementById("bookmarks"); 
 
    createOptions.useAnnotations = false; 
 
    // Create the viewer 
    try { 
        this._documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions); 
 
        // Document viewer settings 
 
        // SVG Preference for Display 
        this._documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg 
 
        // Lazy Loading 
        this._documentViewer.view.lazyLoad = true; 
        if (this._documentViewer.thumbnails) 
            this._documentViewer.thumbnails.lazyLoad = true; 
 
        // Log Rendering Errors 
        let imageViewer: lt.Controls.ImageViewer = this._documentViewer.view.imageViewer; 
 
        let logRenderErrors: lt.Controls.ImageViewerRenderEventHandler = function (sender: any, e: lt.Controls.ImageViewerRenderEventArgs) { 
            let item: number = e.item != null ? e.item.imageViewer.items.indexOf(e.item) : -1; 
            let message: string = "Error during render item " + item + " part " + (e.part) + ": " + (e.error.message); 
            lt.LTHelper.logError({ message: message, error: e.error }); 
        } 
 
        imageViewer.renderError.add(logRenderErrors); 
        if (this._documentViewer.thumbnails && this._documentViewer.thumbnails.imageViewer) 
            this._documentViewer.thumbnails.imageViewer.renderError.add(logRenderErrors); 
    } 
    catch (e) { 
        alert("DocumentViewer creation failed"); 
        lt.LTHelper.logError(e); 
        return; 
    } 
} 

https://www.leadtools.com/help/sdk/tutorials/html5-asp-dotnet-typescript-display-files-in-the-document-viewer.html

Hi SUJAY ANAND,

Please install GroupDocs.Viewer package.

• Right-click on the project in Solution Explorer, create a new Web Form and save it as index.aspx.
• Add the following script inside the head tag to add the Bootstrap’s CSS and the JQuery:

• Insert the following HTML inside the body tag. This HTML will create the page navigation buttons and an iframe to display the pages.

    

        

            Viewer
        
    


    
 
        ‹
        Page:
        
        of
         
        ›
    
    

        
    
    

    

• Below the above-mentioned HTML, add the following JavaScript inside the body tag. This JavaScript contains the functions for the next and the previous buttons as well as the AJAX call to fetch the pages.

• Open index.aspx.cs and replace the code with following:

• namespace DocumentViewer
  {
      public partial class index : System.Web.UI.Page
      {
          static string OutputPath;
          static string DocumentName = "sample.pptx";
          static string StorageFolder;
          static string CachePath;
          static FileCache cache;
          static ViewerSettings settings;
  
          protected void Page_Load(object sender, EventArgs e)
          {
              if (!IsPostBack)
              {
                  // Set output directories
                  OutputPath = Server.MapPath("~/output/"); 
                  // Set storage folder where the source document is located
                  StorageFolder = Server.MapPath("~/storage");
                  // Set the cache path to keep the rendered images
                  CachePath = Path.Combine(OutputPath, "cache");
                  // Set cache
                  cache = new FileCache(CachePath);
                  settings = new ViewerSettings(cache);
                  // Get document info
                  GetDocumentInfo();
              }
          }
  
          private void GetDocumentInfo()
          {
              try
              {
                  using (Viewer viewer = new Viewer(Path.Combine(StorageFolder, DocumentName)))
                  {
                      ViewInfo info = viewer.GetViewInfo(ViewInfoOptions.ForPngView(false));  
                      lblTotalPages.Text = info.Pages.Count.ToString();
                  }
  
              }
              catch
              {
                  // Do something
              }
          }
  
          [System.Web.Services.WebMethod]
          public static string GetPage(string value)
          {
              int PageNumber = Convert.ToInt32(value);
              string PageFilePathFormat = Path.Combine(OutputPath, "img{0}.png");
              using (Viewer viewer = new Viewer(Path.Combine(StorageFolder, DocumentName)))
              {
                  PngViewOptions options = new PngViewOptions(PageFilePathFormat);
                  options.Width = 750;
                  options.Height = 450; 
  
                  viewer.View(options, PageNumber);
              } 
  
              return Path.Combine(@"output", string.Format("img{0}.png", PageNumber));
  
          } 
      }
  }

  Build solution and run.

Accept the answer if it is helpful.

Can you share the source code?

To implement a Document Viewer using ASP.NET C#, you can follow the steps below:

Create a web project in Visual Studio by selecting ASP.NET Web Application (.NET Framework) template.

Add necessary NuGet packages:

Select Tools > NuGet Package Manager > Manage NuGet Packages for Solution.

Search for "SelectPdf" and install it.

3.Create a new ASPX page (e.g., "DocumentViewer.aspx") for the Document Viewer.

4.In the ASPX page, add the necessary controls:

Add an  control to allow users to upload their documents.

Add an  control for the upload button.

Add an