Document Viewer in Asp.net C#

Question

How to implement Document Viewer using Asp.net C#?

Abhishek Yadav · Answer

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 control to display the uploaded document. 5.In the code-behind file of the ASPX page, handle the event for the upload button click: Use the FileUpload control to get the uploaded document. Save the document to a temporary location on the server. 6.Convert the document to PDF format using a library like SelectPdf: Set up the SelectPdf converter object. Load the document from the temporary location. Convert the document to PDF format. Save the PDF file to another temporary location. 7.Set the source of the iframe control in the ASPX page to the URL of the generated PDF file. Build and run the project to see the Document Viewer in action.

Marvin Reid · Answer

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

Tahir Ansari · Answer

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 &#8249; Page: of &#8250; &copy; - GroupDocs 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. $(document).ready(function () { // call for the first time Navigate(1); $('#btnNext').click(function () { var currentPage = getCurrentPageNumber(); var totalPages = getTotalPages(); if ((currentPage + 1) ').html(currentPage + 1) } }); $('#btnPrevious').click(function () { var currentPage = getCurrentPageNumber(); var totalPages = getTotalPages(); if ((currentPage - 1) >= 1) { Navigate(currentPage - 1); $('# ').html(currentPage - 1) } }); }); function getCurrentPageNumber() { return parseInt($('# ').html()); } function getTotalPages() { return parseInt($('# ').html()); } function Navigate(value) { $.ajax({ type: "POST", url: "index.aspx/GetPage", data: '{value: "' + value + '" }', contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { var $iframe = $('#container'); $iframe.attr('src', response.d); }, failure: function (response) { alert("Filed: " + response.d); } }); } 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.

Sujay Anand · Answer

Can you share the source code?

Document Viewer in Asp.net C#

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (4)