Render Word documents as HTML, PDF, and image files Leave feedback
On this page
GroupDocs.Viewer for Node.js allows you to render your Microsoft Word documents in HTML, PDF, PNG, and JPEG formats. You do not need to use Microsoft Word or other word processors to load and view Word documents within your JavaScript application (web or desktop).
To start using the GroupDocs.Viewer API, create a Viewer class instance. 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, PDF, or image format. These methods allow you to render the entire document or specific pages.
GroupDocs.Viewer supports the following Word Processing file formats:
- Microsoft Word Document (.DOCX)
- Microsoft Word 97-2003 Document (.DOC)
- Microsoft Word Macro-Enabled Document (.DOCM)
- Microsoft Word 97-2003 Template (.DOT)
- Microsoft Word Macro-Enabled Template (.DOTM)
- Microsoft Word Template (.DOTX)
- OpenDocument Text (.ODT)
- OpenDocument Text Template (.OTT)
- Rich Text Document (.RTF)
- Plain Text Document (.TXT)
Create an HtmlViewOptions class instance and pass it to the Viewer.view method to convert a Word 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.
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.
const viewer = new groupdocs.viewer.Viewer("resume.docx")
// Create an HTML files.
// {0} is replaced with the current page number in the file name.
const viewOptions = groupdocs.viewer.HtmlViewOptions.forEmbeddedResources("page_{0}.html")
viewer.view(viewOptions)
The following image demonstrates the result:
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
const viewer = new groupdocs.viewer.Viewer("resume.docx")
// Create an HTML file for each 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.
const viewOptions = groupdocs.viewer.HtmlViewOptions.forExternalResources("page_{0}.html", "page_{0}/resource_{0}_{1}", "page_{0}/resource_{0}_{1}")
viewer.view(viewOptions)
The image below demonstrates the result. External resources are placed in a separate folder.
Create a PdfViewOptions class instance and pass it to the Viewer.view method to convert a Word file to PDF. The PdfViewOptions class properties allow you to control the conversion process. For instance, you can protect the output PDF file, reorder its pages, and specify the quality of document images. Refer to the following documentation section for details: Rendering to PDF.
const viewer = new groupdocs.viewer.Viewer("resume.docx")
// Create a PDF file for the document.
// Specify the PDF file name.
const viewOptions = groupdocs.viewer.PdfViewOptions("output.pdf")
viewer.view(viewOptions)
The following image demonstrates the result:
Create a PngViewOptions class instance and pass it to the Viewer.view method to convert a Word file to PNG. Use the PngViewOptions.setHeight and PngViewOptions.setWidth methods to specify the output image size in pixels.
const viewer = new groupdocs.viewer.Viewer("resume.docx")
// Create a PNG image for each document page.
// {0} is replaced with the current page number in the image name.
const viewOptions = groupdocs.viewer.PngViewOptions("output_{0}.png")
viewer.view(viewOptions)
Create a JpgViewOptions class instance and pass it to the Viewer.view method to convert a Word file to JPEG. Use the JpgViewOptions.setHeight and JpgViewOptions.setWidth methods to specify the output image size in pixels.
const viewer = new groupdocs.viewer.Viewer("resume.docx")
// Create a JPG image for each document page.
// {0} is replaced with the current page number in the image name.
const viewOptions = groupdocs.viewer.JpgViewOptions("output_{0}.png")
viewer.view(viewOptions)
Use the following methods to specify the size of page margins in the output files when you convert your Word documents to HTML, PDF, and image formats:
- WordProcessingOptions.setTopMargin specifies the distance (in points) between document content and the top edge of the page.
- WordProcessingOptions.setBottomMargin specifies the distance (in points) between document content and the bottom edge of the page.
- WordProcessingOptions.setLeftMargin specifies the distance (in points) between document content and the left edge of the page.
- WordProcessingOptions.setRightMargin specifies the distance (in points) between document content and the right edge of the page.
You can access these methods for the following classes:
The example below converts a Word document to HTML and specifies page margins for the output file.
const viewer = new groupdocs.viewer.Viewer("resume.docx")
// Create an HTML file for each document page.
// {0} is replaced with the current page number in the file name.
const viewOptions = groupdocs.viewer.HtmlViewOptions.forEmbeddedResources("page_{0}.html")
// Specify the size of page margins in points.
viewOptions.getWordProcessingOptions().setTopMargin(72)
viewOptions.getWordProcessingOptions().setBottomMargin(72)
viewOptions.getWordProcessingOptions().setLeftMargin(54)
viewOptions.getWordProcessingOptions().setRightMargin(54)
viewer.view(viewOptions)
GroupDocs.Viewer does not render tracked changes (revisions made to a Word document) by default. If you want to display tracked changes in the output file, use the WordProcessingOptions.setRenderTrackedChanges method for one of the following classes (depending on the output file format):
The following code example demonstrates how to render a Word document with tracked changes:
const viewer = new groupdocs.viewer.Viewer("resume.docx")
// Convert the document to PDF.
const viewOptions = groupdocs.viewer.PdfViewOptions("output.pdf")
// Enable tracked changes rendering.
viewOptions.getWordProcessingOptions().setRenderTrackedChanges(true)
viewer.view(viewOptions)
The following image illustrates the result:
Use the ViewOptions.setRenderComments method for a target view to display comments in the output file when you convert your document to HTML, PDF, PNG, or JPEG format.
The code example below renders a Word document with comments to PDF.
const viewer = new groupdocs.viewer.Viewer("resume.docx")
// Convert the document to PDF.
const viewOptions = groupdocs.viewer.PdfViewOptions("output.pdf")
// Enable rendering comments.
viewOptions.setRenderComments(true)
viewer.view(viewOptions)
The following image illustrates the result:
Was this page helpful?
Any additional feedback you'd like to share with us?
Please tell us how we can improve this page.
Thank you for your feedback!
We value your opinion. Your feedback will help us improve our documentation.
