Render Project documents as HTML, PDF, and image files Leave feedback

GroupDocs.Viewer for Node.js via Java allows you to render Project files in HTML, PDF, PNG, and JPEG formats. You do not need to use Microsoft Project or other project management software to load and view Project files within your Node.js 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.

View Project files online View demos and examples on GitHub

GroupDocs.Viewer supports the following Project Management file formats:

• Microsoft Project (.MPP)
• Microsoft Project Template (.MPT)
• Microsoft Project Exchange File (.MPX)

Create an HtmlViewOptions class instance and pass it to the Viewer.view method to convert a Project 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("SoftwareDevelopmentPlan.mpp")
// Render the project's active view as HTML.
// {0} is replaced with the current page number in the output file names.
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("SoftwareDevelopmentPlan.mpp")
// Render the project's active view as HTML.
// Specify the HTML file names and location of external resources.
// {0} and {1} are replaced with the page number and resource name, respectively.
const viewOptions = groupdocs.viewer.HtmlViewOptions.forEmbeddedResources("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 Project 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("SoftwareDevelopmentPlan.mpp")
// Create a PDF file.
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 Project 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("SoftwareDevelopmentPlan.mpp")
// Render the project's active view as PNG.
// {0} is replaced with the page numbers in the output image names.
const viewOptions = groupdocs.viewer.PngViewOptions("output_{0}.png")
// Set width and height.
viewOptions.setWidth(1600)
viewOptions.setHeight(650)
viewer.view(viewOptions)

The following image demonstrates the result:

Create a JpgViewOptions class instance and pass it to the Viewer.view method to convert a Project 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("SoftwareDevelopmentPlan.mpp")
// Render the project's active view as JPG.
// {0} is replaced with the page numbers in the output image names.
const viewOptions = groupdocs.viewer.PngViewOptions("output_{0}.jpg")
// Set width and height.
viewOptions.setWidth(1600)
viewOptions.setHeight(650)
viewer.view(viewOptions)

Follow the steps below to obtain information about a Project file (the file format, the number of pages, the project’s start and end dates):

1. Create a ViewInfoOptions instance for a specific view.
2. Call the Viewer.getViewInfo method, pass the ViewInfoOptions instance to this method as a parameter, and cast the returned object to the ProjectManagementViewInfo type.
3. Use the ProjectManagementViewInfo class properties to retrieve information about the Project file.

const viewer = new groupdocs.viewer.Viewer("SoftwareDevelopmentPlan.mpp")
  
const viewInfoOptions = groupdocs.viewer.ViewInfoOptions.forHtmlView()
const viewInfo = viewer.getViewInfo(viewInfoOptions)

console.log("File type: " + viewInfo.getFileType())
console.log("Pages count: " + viewInfo.getPages().size())
console.log("Project start date: " + viewInfo.getStartDate())
console.log("Project end date: " + viewInfo.getEndDate())

The following image shows a sample console output:

GroupDocs.Viewer allows you to specify page size for the output file when you convert your Project document to HTML, PDF, or image format. Use the ProjectManagementOptions.setPageSize method to select one of the predefined page sizes (LETTER, LEDGER, A0, A1, A2, A3, or A4) (see the PageSize enumeration). You can use this method for the following classes (depending on the output file format):

• HtmlViewOptions
• PdfViewOptions
• PngViewOptions
• JpgViewOptions

The following example specifies page size for the output PDF file:

const viewer = new groupdocs.viewer.Viewer("SoftwareDevelopmentPlan.mpp")
// Create a PDF file.
const viewOptions = groupdocs.viewer.PdfViewOptions("output.pdf")
// Specify the page size.
viewOptions.getProjectManagementOptions().setPageSize(groupdocs.viewer.PageSize.A3);
viewer.view(viewOptions)

When rendering a Project file, GroupDocs.Viewer selects the smallest time unit on a timescale based on the total length of the project. You can adjust the timescale to show smaller or greater time units (from days to months). To do this, use the ViewOptions.getProjectManagementOptions().setTimeUnit method for a target view to one of the following TimeUnit enumeration members:

• DAYS displays days on the timescale.
• THIRDS_OF_MONTHS displays the Beginning/Middle/End (B/M/E) of each month on the timescale.
• MONTHS displays months on the timescale.
• UNSPECIFIED means that the timescale unit is not specified.

The following code sample demonstrates how to specify the timescale unit when rendering a Project file to HTML:

const viewer = new groupdocs.viewer.Viewer("sample.mpp")
const viewOptions = groupdocs.viewer.HtmlViewOptions.forEmbeddedResources()
viewOptions.getProjectManagementOptions().setTimeUnit(groupdocs.viewer.TimeUnit.DAYS)
viewer.view(viewOptions)

The image below illustrates the result.

With GroupDocs.Viewer, you can render only a portion of the project’s timeline when you convert your Project file to HTML, PDF, or image format. Use the ViewOptions.getProjectManagementOptions().setStartDate and ViewOptions.getProjectManagementOptions().setEndDate methods for a target view to specify a date range the timeline should display. If you set only the StartDate property, the timeline displays information for tasks from the specified date to the project’s finish date. If you set only the EndDate property, the timeline contains dates from the project’s start date to the specified date.

The example below demonstrates how to convert a Project file to PDF and set the timeline date range.

const viewer = new groupdocs.viewer.Viewer("SoftwareDevelopmentPlan.mpp")
const viewInfoOptions = groupdocs.viewer.ViewInfoOptions.forHtmlView()
const viewInfo = viewer.getViewInfo(viewInfoOptions)
const viewOptions = groupdocs.viewer.HtmlViewOptions.forEmbeddedResources("output.html")

viewOptions.getProjectManagementOptions().setStartDate(new Date(2022, 8, 1, 0, 0))
viewOptions.getProjectManagementOptions().setEndDate(new Date(2022, 9, 1, 0, 0))
viewer.view(viewOptions)

The following image illustrates the result:

Microsoft Project allows you to add notes to tasks, resources, and assignments.

If you need to display these notes in the output HTML, PDF, or image files, use the ViewOptions.setRenderNotes method for a target view.

The following code sample converts a Project file with task notes to PDF:

const viewer = new groupdocs.viewer.Viewer("SoftwareDevelopmentPlan.mpp")
// Create a PDF file.
const viewOptions = groupdocs.viewer.PdfViewOptions("output.pdf")
// Enable notes rendering.
viewOptions.setRenderNotes(true)
viewer.view(viewOptions)

The image below demonstrates the result. Notes are rendered on a separate page.