View and render documents with GroupDocs.Viewer Leave feedback
On this page
GroupDocs.Viewer renders a document into something a browser can display — HTML, PDF, or one image per page — without Microsoft Office or any other external software. It is the API to reach for when you want to show a document rather than change it.
Every example below opens contract.docx and is ready to copy into a project once you have installed the package.
Rendering to HTML gives you one .html file per page. forEmbeddedResources inlines images, fonts and stylesheets into each page, so a page is self-contained and needs no companion files.
import { Viewer } from '@groupdocs/groupdocs.total';
import java from 'java';
const HtmlViewOptions = java.import('com.groupdocs.viewer.options.HtmlViewOptions');
const viewer = new Viewer('contract.docx');
// {0} is replaced with the page number, so page 1 becomes page_1.html
const viewOptions = HtmlViewOptions.forEmbeddedResources(
'viewer-render-to-html/page_{0}.html'
);
viewer.view(viewOptions);
viewer.close();
contract.docx is the sample file used in this example. Click here to download it.
viewer-render-to-html/page_1.html (147 KB)
viewer-render-to-html/page_2.html (74 KB)
viewer-render-to-html/page_3.html (828 bytes)
To keep resources as separate files next to the HTML instead of inlining them, use HtmlViewOptions.forExternalResources — useful when several pages share the same images and you want them cached once.
Rendering to PDF produces a single file, which is the usual choice for printing or archiving.
import { Viewer } from '@groupdocs/groupdocs.total';
import java from 'java';
const PdfViewOptions = java.import('com.groupdocs.viewer.options.PdfViewOptions');
const viewer = new Viewer('contract.docx');
const viewOptions = new PdfViewOptions('viewer-render-to-pdf.pdf');
viewer.view(viewOptions);
viewer.close();
contract.docx is the sample file used in this example. Click here to download it.
Binary file (PDF, 126 KB)
Rendering to images gives you one PNG per page — the right output for thumbnails and previews. PngViewOptions also accepts a width and height if you need a fixed size.
import { Viewer } from '@groupdocs/groupdocs.total';
import java from 'java';
const PngViewOptions = java.import('com.groupdocs.viewer.options.PngViewOptions');
const viewer = new Viewer('contract.docx');
const viewOptions = new PngViewOptions('viewer-render-to-png/page_{0}.png');
// Render only the first two pages
viewer.view(viewOptions, 1, 2);
viewer.close();
contract.docx is the sample file used in this example. Click here to download it.
viewer-render-to-png/page_1.png (86 KB)
viewer-render-to-png/page_2.png (87 KB)
Before rendering you often want to know what you are dealing with — how many pages, what format, whether it is encrypted. getViewInfo answers that without rendering anything.
import { Viewer } from '@groupdocs/groupdocs.total';
import java from 'java';
const ViewInfoOptions = java.import('com.groupdocs.viewer.options.ViewInfoOptions');
const viewer = new Viewer('contract.docx');
const viewInfoOptions = ViewInfoOptions.forHtmlView();
const viewInfo = viewer.getViewInfo(viewInfoOptions);
console.log('File type: ' + viewInfo.getFileType());
console.log('Pages: ' + viewInfo.getPages().size());
const pages = viewInfo.getPages();
for (let i = 0; i < pages.size(); i++) {
const page = pages.get(i);
console.log('Page ' + page.getNumber() + ': ' + page.getWidth() + 'x' + page.getHeight());
}
viewer.close();
contract.docx is the sample file used in this example. Click here to download it.
File type: Microsoft Word Open XML Document (.docx)
Pages: 3
Page 1: 612x792
Page 2: 612x792
Page 3: 612x792
The examples above cover the common cases. GroupDocs.Viewer also renders archives, CAD drawings, email messages, Outlook data files and Visio diagrams, caches rendered output, and processes attachments.
- GroupDocs.Viewer for Node.js via Java documentation — the full product guide
- Supported file formats
- API reference
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.
