Render PDF documents as HTML and image files
Leave feedback
On this page
GroupDocs.Viewer for .NET allows you to render your PDF files in HTML, PNG, and JPEG formats. Use this library to implement a simple PDF viewer within your .NET application (web or desktop).
Create a Viewer class instance to get started with the GroupDocs.Viewer API. Pass a document you want to view to the class constructor. You can load the document from a file or stream. Call one of the Viewer.View method overloads to convert the document to HTML or image format. These methods allow you to render the entire document or specific pages.
GroupDocs.Viewer can detect the document format automatically based on information in the file header.
Render PDF files as HTML
Create an HtmlViewOptions class instance and pass it to the Viewer.View method to convert a PDF file to HTML. The HtmlViewOptions class properties allow you to control the conversion process. For instance, you can embed all external resources in the generated HTML file, minify the output file, and optimize it for printing. Refer to the following documentation section for details: Rendering to HTML.
Create an HTML file with embedded resources
To save all elements of an HTML page (including text, graphics, and stylesheets) into a single file, call the HtmlViewOptions.ForEmbeddedResources method and specify the output file name.
usingGroupDocs.Viewer;usingGroupDocs.Viewer.Options;// ...using(varviewer=newViewer("resume.pdf")){// Create an HTML file for each PDF page.// {0} is replaced with the current page number in the file name.varviewOptions=HtmlViewOptions.ForEmbeddedResources("page_{0}.html");viewer.View(viewOptions);}
ImportsGroupDocs.ViewerImportsGroupDocs.Viewer.Options' ...
ModuleProgramSubMain(argsAsString())Usingviewer=NewViewer("resume.pdf")' Create an HTML file for each PDF page.
' {0} is replaced with the current page number in the file name.
DimviewOptions=HtmlViewOptions.ForEmbeddedResources("page_{0}.html")viewer.View(viewOptions)EndUsingEndSubEndModule
The following image demonstrates the result:
Create an HTML file with external resources
If you want to store an HTML file and additional resource files (such as fonts, images, and stylesheets) separately, call the HtmlViewOptions.ForExternalResources method and pass the following parameters:
The output file path format
The path format for the folder with external resources
The resource URL format
usingGroupDocs.Viewer;usingGroupDocs.Viewer.Options;// ...using(varviewer=newViewer("resume.pdf")){// Create an HTML file for each PDF page.// Specify the HTML file names and location of external resources.// {0} and {1} are replaced with the current page number and resource name, respectively.varviewOptions=HtmlViewOptions.ForExternalResources("page_{0}.html","page_{0}/resource_{0}_{1}","page_{0}/resource_{0}_{1}");viewer.View(viewOptions);}
ImportsGroupDocs.ViewerImportsGroupDocs.Viewer.Options' ...
ModuleProgramSubMain(argsAsString())Usingviewer=NewViewer("resume.pdf")' Create an HTML file for each PDF page.
' Specify the HTML file names and location of external resources.
' {0} and {1} are replaced with the current page number and resource name, respectively.
DimviewOptions=HtmlViewOptions.ForExternalResources("page_{0}.html","page_{0}/resource_{0}_{1}","page_{0}/resource_{0}_{1}")viewer.View(viewOptions)EndUsingEndSubEndModule
The image below demonstrates the result. External resources are placed in a separate folder.
Create HTML with fixed layout
By default, PDF and EPUB documents are rendered to HTML with fixed layout to ensure that the output HTML looks the same as a source document. Rendering to fixed layout means that all the HTML elements are absolutely positioned to the container element. And container element has a fixed size so browser window resizing won’t have an effect on the position and size of elements in a document.
The following image demonstrates PDF document rendered HTML with fixed layout:
Create HTML with fluid layout
When rendering to HTML with fluid layout HTML document doesn’t have a fixed size. In case you resize a browser window the document content tries to fit into it. To create HTML with fluid layout set PdfOptions.FixedLayout property to false.
usingGroupDocs.Viewer;usingGroupDocs.Viewer.Options;// ...using(varviewer=newViewer("Letter.pdf")){// Create an HTML file for each PDF page.// {0} is replaced with the current page number in the file name.varviewOptions=HtmlViewOptions.ForEmbeddedResources("page_{0}.html");// Disable fixed layout.viewOptions.PdfOptions.FixedLayout=false;viewer.View(viewOptions);}
ImportsGroupDocs.ViewerImportsGroupDocs.Viewer.Options' ...
ModuleProgramSubMain(argsAsString())Usingviewer=NewViewer("Letter.pdf")' Create an HTML file for each PDF page.
' {0} is replaced with the current page number in the file name.
DimviewOptions=HtmlViewOptions.ForEmbeddedResources("page_{0}.html")' Disable fixed layout.
viewOptions.PdfOptions.FixedLayout=Falseviewer.View(viewOptions)EndUsingEndSubEndModule
Note
When rendering PDF and EPUB documents to HTML with a fluid layout all the graphic content such as images are ignored.
The following image demonstrates the result:
Adjust image quality in the output HTML file
The HtmlViewOptions.PdfOptions.ImageQuality option allows you to specify the quality of images in the output HTML file. You can set this property to one of the following values:
ImageQuality.Low — The image resolution is low (96 DPI), and the image size is small. Use this value to increase the conversion performance.
ImageQuality.Medium — The image resolution is medium (192 DPI), and the image size is larger compared to the low quality images.
ImageQuality.High — The image resolution is high (300 DPI), and the image size is big. Use of this value may decrease the conversion performance.
The following code snippet shows how to set the medium image quality when rendering a PDF document to HTML:
usingGroupDocs.Viewer;usingGroupDocs.Viewer.Options;// ...using(varviewer=newViewer("resume.pdf")){// Create an HTML file for each document page.// {0} is replaced with the current page number in the file name.varviewOptions=HtmlViewOptions.ForEmbeddedResources("page_{0}.html");// Set image quality to medium.viewOptions.PdfOptions.ImageQuality=ImageQuality.Medium;viewer.View(viewOptions);}
ImportsGroupDocs.ViewerImportsGroupDocs.Viewer.Options' ...
ModuleProgramSubMain(argsAsString())Usingviewer=NewViewer("resume.pdf")' Create an HTML file for each document page.
' {0} is replaced with the current page number in the file name.
DimviewOptions=HtmlViewOptions.ForEmbeddedResources("page_{0}.html")' Set image quality to medium.
viewOptions.PdfOptions.ImageQuality=ImageQuality.Mediumviewer.View(viewOptions)EndUsingEndSubEndModule
Render text as an image
GroupDocs.Viewer supports the HtmlViewOptions.PdfOptions.RenderTextAsImage option that allows you to render text as an image when you convert a PDF file to HTML. In this case, the layout of the output HTML file closely mirrors the layout of the source PDF document.
The following code snippet shows how to enable this option in code:
usingGroupDocs.Viewer;usingGroupDocs.Viewer.Options;// ...using(varviewer=newViewer("resume.pdf")){// Create an HTML file for each document page.// {0} is replaced with the current page number in the file name.varviewOptions=HtmlViewOptions.ForEmbeddedResources("text-as-image_{0}.html");// Enable rendering text as image.viewOptions.PdfOptions.RenderTextAsImage=true;viewer.View(viewOptions);}
ImportsGroupDocs.ViewerImportsGroupDocs.Viewer.Options' ...
ModuleProgramSubMain(argsAsString())Usingviewer=NewViewer("resume.pdf")' Create an HTML file for each document page.
' {0} is replaced with the current page number in the file name.
DimviewOptions=HtmlViewOptions.ForEmbeddedResources("text-as-image_{0}.html")' Enable rendering text as image.
viewOptions.PdfOptions.RenderTextAsImage=Trueviewer.View(viewOptions)EndUsingEndSubEndModule
The image below illustrates the result. PDF content is exported to HTML as an image, so users cannot select or copy document text.
Enable multi-layer rendering
When you convert a PDF file to HTML, GroupDocs.Viewer creates an HTML document with a single layer (the z-index is not specified for document elements). This helps increase performance and reduce the output file size. If you convert a PDF document with multiple layers and want to improve the position of document elements in the output HTML file, activate the HtmlViewOptions.PdfOptions.EnableLayeredRendering property to render text and graphics in the HTML file according to their z-order in the source PDF document.
The following code snippet shows how to enable the multi-layer rendering:
usingGroupDocs.Viewer;usingGroupDocs.Viewer.Options;// ...using(varviewer=newViewer("sample.pdf")){// Create an HTML file for each document page.// {0} is replaced with the current page number in the file name.varviewOptions=HtmlViewOptions.ForEmbeddedResources("page_{0}.html");// Enable the multi-layer rendering.viewOptions.PdfOptions.EnableLayeredRendering=true;viewer.View(viewOptions);}
ImportsGroupDocs.ViewerImportsGroupDocs.Viewer.Options' ...
ModuleProgramSubMain(argsAsString())Usingviewer=NewViewer("sample.pdf")' Create an HTML file for each document page.
' {0} is replaced with the current page number in the file name.
DimviewOptions=HtmlViewOptions.ForEmbeddedResources("page_{0}.html")' Enable the multi-layer rendering.
viewOptions.PdfOptions.EnableLayeredRendering=Trueviewer.View(viewOptions)EndUsingEndSubEndModule
usingGroupDocs.Viewer;usingGroupDocs.Viewer.Options;// ...using(varviewer=newViewer("resume.pdf")){// Create a PNG image for each PDF page.// {0} is replaced with the current page number in the image name.varviewOptions=newPngViewOptions("output_{0}.png");// Set width and height.viewOptions.Width=800;viewOptions.Height=900;viewer.View(viewOptions);}
ImportsGroupDocs.ViewerImportsGroupDocs.Viewer.Options' ...
ModuleProgramSubMain(argsAsString())Usingviewer=NewViewer("resume.pdf")' Create a PNG image for each PDF page.
' {0} is replaced with the current page number in the image name.
DimviewOptions=NewPngViewOptions("output_{0}.png")' Set width and height.
viewOptions.Width=800viewOptions.Height=900viewer.View(viewOptions)EndUsingEndSubEndModule
usingGroupDocs.Viewer;usingGroupDocs.Viewer.Options;// ...using(varviewer=newViewer("resume.pdf")){// Create a JPEG image for each PDF page.// {0} is replaced with the current page number in the image name.varviewOptions=newJpgViewOptions("output_{0}.jpg");// Set width and height.viewOptions.Width=800;viewOptions.Height=900;viewer.View(viewOptions);}
ImportsGroupDocs.ViewerImportsGroupDocs.Viewer.Options' ...
ModuleProgramSubMain(argsAsString())Usingviewer=NewViewer("resume.pdf")' Create a JPEG image for each PDF page.
' {0} is replaced with the current page number in the image name.
DimviewOptions=NewJpgViewOptions("output_{0}.jpg")' Set width and height.
viewOptions.Width=800viewOptions.Height=900viewer.View(viewOptions)EndUsingEndSubEndModule
Preserve the size of document pages
When you render PDF documents as images, GroupDocs.Viewer calculates the optimal image size to achieve better rendering quality. If you want the generated images to be the same size as pages in the source PDF document, enable the PdfOptions.RenderOriginalPageSize property for the PngViewOptions or JpgViewOptions class (depending on the output image format).
usingGroupDocs.Viewer;usingGroupDocs.Viewer.Options;// ...using(varviewer=newViewer("resume.pdf")){// Create a PNG image for each PDF page.// {0} is replaced with the current page number in the image name.varviewOptions=newPngViewOptions("output_{0}.png");// Preserve the size of document pages.viewOptions.PdfOptions.RenderOriginalPageSize=true;viewer.View(viewOptions);}
ImportsGroupDocs.ViewerImportsGroupDocs.Viewer.Options' ...
ModuleProgramSubMain(argsAsString())Usingviewer=NewViewer("resume.pdf")' Create a PNG image for each PDF page.
' {0} is replaced with the current page number in the image name.
DimviewOptions=NewPngViewOptions("output_{0}.png")' Preserve the size of document pages.
viewOptions.PdfOptions.RenderOriginalPageSize=Trueviewer.View(viewOptions)EndUsingEndSubEndModule
Enable font hinting
To adjust the display of outline fonts when you convert PDF documents to PNG or JPEG, activate the PdfOptions.EnableFontHinting option, as shown below:
usingGroupDocs.Viewer;usingGroupDocs.Viewer.Options;// ...using(varviewer=newViewer("resume.pdf")){// Create a PNG image for each PDF page.// {0} is replaced with the current page number in the image name.varviewOptions=newPngViewOptions("output_{0}.png");//Enable font hintingviewOptions.PdfOptions.EnableFontHinting=true;viewer.View(viewOptions);}
ImportsGroupDocs.ViewerImportsGroupDocs.Viewer.Options' ...
ModuleProgramSubMain(argsAsString())Usingviewer=NewViewer("resume.pdf")' Create a PNG image for each PDF page.
' {0} is replaced with the current page number in the image name.
DimviewOptions=NewPngViewOptions("output_{0}.png")'Enable font hinting
viewOptions.PdfOptions.EnableFontHinting=Trueviewer.View(viewOptions)EndUsingEndSubEndModule
Refer to the following article for more information on font hinting: Font hinting.
Disable character grouping
When you render PDF files in other formats, GroupDocs.Viewer groups individual characters into words to improve rendering performance. If your document contains hieroglyphic or special symbols, you may need to disable character grouping to generate a more precise layout. To do this, use the PdfOptions.DisableCharsGrouping option, as shown below:
usingGroupDocs.Viewer;usingGroupDocs.Viewer.Options;// ...using(varviewer=newViewer("sample.pdf")){// Create an HTML file for each document page.// {0} is replaced with the current page number in the file name.varviewOptions=HtmlViewOptions.ForEmbeddedResources("page_{0}.html");// Disable character groupingviewOptions.PdfOptions.DisableCharsGrouping=true;viewer.View(viewOptions);}
ImportsGroupDocs.ViewerImportsGroupDocs.Viewer.Options' ...
ModuleProgramSubMain(argsAsString())Usingviewer=NewViewer("sample.pdf")' Create an HTML file for each document page.
' {0} is replaced with the current page number in the file name.
DimviewOptions=HtmlViewOptions.ForEmbeddedResources("page_{0}.html")' Disable character grouping
viewOptions.PdfOptions.DisableCharsGrouping=Trueviewer.View(viewOptions)EndUsingEndSubEndModule
Render text comments
Enable the ViewOptions.RenderComments option for a target view to display textual annotations (such as text comments, sticky notes, text boxes and callouts) in the output HTML, PNG, or JPEG files.
The code example below renders a PDF file with text comments as an image.
usingGroupDocs.Viewer;usingGroupDocs.Viewer.Options;// ...using(varviewer=newViewer("resume_commented.pdf")){// Create a PNG image for each PDF page.// {0} is replaced with the current page number in the image name.varviewOptions=newPngViewOptions("output_{0}.png");// Enable comments rendering.viewOptions.RenderComments=true;viewer.View(viewOptions);}
ImportsGroupDocs.ViewerImportsGroupDocs.Viewer.Options' ...
ModuleProgramSubMain(argsAsString())Usingviewer=NewViewer("resume_commented.pdf")' Create a PNG image for each PDF page.
' {0} is replaced with the current page number in the image name.
DimviewOptions=NewPngViewOptions("output_{0}.png")' Enable comments rendering.
viewOptions.RenderComments=Trueviewer.View(viewOptions)EndUsingEndSubEndModule
The following image illustrates the result:
Get information about a PDF file
Follow the steps below to obtain information about a PDF file (the number of pages, page size, and printing permissions):
Call the Viewer.GetViewInfo method, pass the ViewInfoOptions instance to this method as a parameter, and cast the returned object to the PdfViewInfo type.
Use the PdfViewInfo class properties to retrieve document-specific information.
usingGroupDocs.Viewer;usingGroupDocs.Viewer.Options;usingGroupDocs.Viewer.Results;// ...using(varviewer=newViewer("resume.pdf")){varviewInfoOptions=ViewInfoOptions.ForHtmlView();varviewInfo=viewer.GetViewInfo(viewInfoOptions)asPdfViewInfo;// Display information about the PDF document.Console.WriteLine($"File type: {viewInfo.FileType}");Console.WriteLine($"The number of pages: {viewInfo.Pages.Count}");Console.WriteLine($"Is printing allowed: {viewInfo.PrintingAllowed}");// Display information about all document pages.Console.WriteLine("Page information:");foreach(PagepageinviewInfo.Pages){// The Page.ToString method is overriden to display the following page information: // "Page {Number} ({visibility}) {Width}x{Height}px with {Lines.Count} line(s)."Console.WriteLine(page);}}
ImportsGroupDocs.ViewerImportsGroupDocs.Viewer.OptionsImportsGroupDocs.Viewer.Results' ...
ModuleProgramSubMain(argsAsString())Usingviewer=NewViewer("resume.pdf")DimviewInfoOptions=ViewInfoOptions.ForHtmlView()DimviewInfo=TryCast(viewer.GetViewInfo(viewInfoOptions),PdfViewInfo)' Display information about the PDF document.
Console.WriteLine($"File type: {viewInfo.FileType}")Console.WriteLine($"The number of pages: {viewInfo.Pages.Count}")Console.WriteLine($"Is printing allowed: {viewInfo.PrintingAllowed}")' Display information about all document pages.
Console.WriteLine("Page information:")ForEachpageAsPageInviewInfo.Pages' The Page.ToString method is overriden to display the following page information:
' "Page {Number} ({visibility}) {Width}x{Height}px with {Lines.Count} line(s)."
Console.WriteLine(page)NextEndUsingEndSubEndModule
The following image shows a sample console output:
Extract text from a PDF file
Set the ViewInfoOptions.ExtractText property to true to enable PDF text extraction. Use the PdfViewInfo.Pages property to obtain the list of all document pages, and iterate through the collection of lines on each page (Page.Lines) to retrieve text for each line.
usingGroupDocs.Viewer;usingGroupDocs.Viewer.Options;usingGroupDocs.Viewer.Results;// ...using(varviewer=newViewer("resume.pdf")){varviewInfoOptions=ViewInfoOptions.ForHtmlView();viewInfoOptions.ExtractText=true;varviewInfo=viewer.GetViewInfo(viewInfoOptions)asPdfViewInfo;// Retrieve text from the PDF file.Console.WriteLine("Extracted document text:");foreach(PagepageinviewInfo.Pages)foreach(Linelineinpage.Lines){Console.WriteLine(line.Value);}}
ImportsGroupDocs.ViewerImportsGroupDocs.Viewer.OptionsImportsGroupDocs.Viewer.Results' ...
ModuleProgramSubMain(argsAsString())Usingviewer=NewViewer("resume.pdf")DimviewInfoOptions=ViewInfoOptions.ForHtmlView()viewInfoOptions.ExtractText=TrueDimviewInfo=TryCast(viewer.GetViewInfo(viewInfoOptions),PdfViewInfo)' Retrieve text from the PDF file.
Console.WriteLine("Extracted document text:")ForEachpageAsPageInviewInfo.PagesForEachlineAsLineInpage.LinesConsole.WriteLine(line.Value)NextNextEndUsingEndSubEndModule
Skip font license verification when rendering XPS and OXPS files
If an XPS or OXPS file contains a font that cannot be embedded due to licensing restrictions, GroupDocs.Viewer throws an exception at runtime. If you have a license for this font, enable the PdfOptions.DisableFontLicenseVerifications option to skip font license verification.
Enclose images in SVG when rendering PDF and Page Layout files
By default, when rendering to the PDF and Page Layout file formats, all images are combined into a single PNG file, which serves as the background for the output HTML document.
The PdfOptions.WrapImagesInSvg option allows you to wrap each image in the output HTML document with an SVG tag to improve output quality.
This option is available when rendering PDF and Page Layout file formats to HTML with embedded or external resources.
The following image shows the rendering resume.pdf with the disabled (left) and enabled (right) WrapImagesInSvg option:
Disable copy protection
When rendering PDF files with protection against copying text and images to HTML, GroupDocs.Viewer adds an inert HTML attribute to the HTML <body> tag.
Use PdfOptions.DisableCopyProtection to turn off copy protection. When DisableCopyProtection is set to true, the inert HTML attribute won’t be added to the HTML <body> tag in any case.
Note
This option was added in GroupDocs.Viewer for .NET 24.4. Previous versions of GroupDocs.Viewer for .NET ignores PDF copy protection and does not add inert HTML attribute to HTML <body> tag.
This option is supported when rendering PDF files to HTML with embedded or external resources.
The following image shows the rendering of protected-resume.pdf with copy protection on the left and with with DisableCopyProtection option set to true on the right:
Repairing corrupted PDF documents
By default GroupDocs.Viewer cannot process the PDF documents with corrupted structure or content — it throws an exception when trying to open such files. However, starting from the version 24.5 GroupDocs.Viewer can try to repair the structural corruptions in PDF documents. By default this feature is disabled. To enable it, need to use the newly added TryRepair boolean property of the LoadOptions class by setting its value to true.
When enabled, this feature addresses the following issues in a PDF document:
Broken references within the document (incorrect object offsets in the Cross-reference list).
Missing critical elements like root object, page object, or page content.