Render PowerPoint presentations as HTML, PDF, and image files

GroupDocs.Viewer for Node.js allows you to render your presentations in HTML, PDF, PNG, and JPEG formats. You do not need to use Microsoft PowerPoint or other software to load and view presentations within your Java application (web or desktop).

Create a Viewer class instance to get started with the GroupDocs.Viewer API. Pass a presentation you want to view to the class constructor. You can load the presentation from a file or stream. Call one of the Viewer.view method overloads to convert the presentation to HTML, PDF, or image format. These methods allow you to render the entire presentation or specific slides.

View PowerPoint files online View demos and examples on GitHub

Supported Presentation file formats

GroupDocs.Viewer supports the following file formats:

Render presentations as HTML

Create an HtmlViewOptions class instance and pass it to the Viewer.view method to convert a presentation 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.

const viewer = new groupdocs.viewer.Viewer("sample.pptx")
// Create an HTML file for each slide.
// {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:

Render a presentation file to HTML

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
const viewer = new groupdocs.viewer.Viewer("sample.pptx")
// Create an HTML file for each slide.
// 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.

Place HTML resources in a separate folder

Render presentations as PDF

Create a PdfViewOptions class instance and pass it to the Viewer.view method to convert a presentation 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("sample.pptx")
const viewOptions = groupdocs.viewer.PdfViewOptions("output.pdf")
viewer.view(viewOptions)

The following image demonstrates the result:

Render a presentation file to PDF

Render presentations as PNG

Create a PngViewOptions class instance and pass it to the Viewer.view method to convert a presentation 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("sample.pptx")
// Create a PNG image for each slide.
// {0} is replaced with the current page number in the image name.
const viewOptions = groupdocs.viewer.PngViewOptions("output_{0}.png")
viewer.view(viewOptions)

The following image demonstrates the result:

Render a presentation file to PNG

Render presentations as JPEG

Create a JpgViewOptions class instance and pass it to the Viewer.view method to convert a presentation 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("sample.pptx")
// Create a JPG image for each slide.
// {0} is replaced with the current page number in the image name.
const viewOptions = groupdocs.viewer.JpgViewOptions("output_{0}.jpg")
viewOptions.setWidth(950)
viewOptions.setHeight(550)
viewer.view(viewOptions)

Specify image resolution

When you convert presentations with high-resolution images to other formats, you may need to lower image resolution to reduce the output file size. GroupDocs.Viewer supports the PresentationOptions.setResolution method that allows you to compress images in the output HTML and PDF files. To access this option, use the HtmlViewOptions.setPresentationOptions or PdfViewOptions.setPresentationOptions methods (depending on the output file format).

You can use the PresentationOptions.setResolution method to one of the following Resolution field values:

Resolution fieldDPIRemarks
DOCUMENT_RESOLUTIONAs in the source fileThis is the default value.
DPI_7272Maximum image compression and minimum file size.
DPI_9696Good for web pages and projectors.
DPI_150150Good for web pages and projectors.
DPI_220220Excellent quality on most printers and screens.
DPI_330330Good quality for high-definition (HD) displays.

The following example demonstrates how to specify image resolution in code:

const viewer = new groupdocs.viewer.Viewer("sample.pptx")
const viewOptions = groupdocs.viewer.PdfViewOptions("output.pdf")
viewOptions.getPresentationOptions().setResolution(Resolution.Dpi150)
viewer.view(viewOptions)

Render hidden slides

If your presentation contains hidden slides, use the ViewOptions.setRenderHiddenPages method for a target view to display these slides in the output HTML, PDF, or image files.

The following code example uses this option to display hidden slides in the generated PDF file:

const viewer = new groupdocs.viewer.Viewer("sample.pptx")
const viewOptions = groupdocs.viewer.PdfViewOptions("output.pdf")
viewOptions.setRenderHiddenPages(true)
viewer.view(viewOptions)

Render comments

Use the ViewOptions.setRenderComments method for a target view to display comments in the output file when you convert your presentation to HTML, PDF, PNG, or JPEG format.

const viewer = new groupdocs.viewer.Viewer("sample.pptx")
const viewOptions = groupdocs.viewer.PdfViewOptions("output.pdf")
viewOptions.setRenderComments(true)
viewer.view(viewOptions)

The following image demonstrates the result:

Render a presentation with comments

Render speaker notes

A presentation file can contain speaker notes that help presenters recall important information during the presentation. Speaker notes appear in the Notes pane below each slide.

Speaker notes in Microsoft PowerPoint

Use the ViewOptions.setRenderNotes method for a target view to display speaker notes in the output HTML, PDF, or image files.

The following code sample renders a presentation with speaker notes to PDF:

const viewer = new groupdocs.viewer.Viewer("sample.pptx")
const viewOptions = groupdocs.viewer.PdfViewOptions("output.pdf")
viewOptions.setRenderNotes(true)
viewer.view(viewOptions)

The image below demonstrates the result.

Render a presentation with notes