1. GroupDocs Documentation
    2. /
    3. GroupDocs.Viewer Product Family
    4. /
    5. GroupDocs.Viewer for Node.js
    6. /
    7. Document rendering basics
    8. /
    9. Render Spreadsheet files
    10. /
    11. Render Excel and Apple Numbers spreadsheets

    Render Excel and Apple Numbers spreadsheets as HTML, PDF, and image files

    On this page

    GroupDocs.Viewer for Node.js allows you to render your spreadsheet files in HTML, PDF, PNG, and JPEG formats. You do not need to use Microsoft Excel or other spreadsheet programs to load and view Excel documents within your JavaScript application (web or desktop).

    To start with the GroupDocs.Viewer API, create a Viewer class instance. Pass a spreadsheet file 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 Excel files online View demos and examples on GitHub

    Supported spreadsheet file formats

    GroupDocs.Viewer supports the following spreadsheet file formats:

    Render spreadsheets as HTML

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

    Convert an Excel workbook to HTML 

    const viewer = new groupdocs.viewer.Viewer("invoice.xlsx")
// Convert the spreadsheet to HTML.
// {0} is replaced with the current page number in the file names.
const viewOptions = groupdocs.viewer.HtmlViewOptions.forEmbeddedResources("page_{0}.html")
viewer.view(viewOptions)

    The following image demonstrates the result:

    Render an Excel file to HTML

    Convert an Apple Numbers spreadsheet to HTML 

    const viewer = new groupdocs.viewer.Viewer("Products.numbers")
// Convert the spreadsheet to HTML.
// {0} is replaced with the current page number in the file names.
const viewOptions = groupdocs.viewer.HtmlViewOptions.forEmbeddedResources("page_{0}.html")
viewer.view(viewOptions)

    The following image demonstrates the result:

    Render an Apple Numbers spreadsheet 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

    Convert an Excel workbook to HTML 

    const viewer = new groupdocs.viewer.Viewer("invoice.xlsx")
// Convert the spreadsheet to HTML.
// 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)

    Convert an Apple Numbers spreadsheet to HTML 

    const viewer = new groupdocs.viewer.Viewer("Products.numbers")
// Convert the spreadsheet to HTML.
// 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

    Convert all Excel worksheets to one HTML file

    To convert all worksheets to one HTML file, use the HtmlViewOptions.setRenderToSinglePage method. This feature is supported in both cases - when converting to HTML with embedded and external resources.

    const viewer = new groupdocs.viewer.Viewer("Personal_net_worth_calculator.xlsx")
// Convert all Excel worksheets to one HTML file.
const viewOptions = groupdocs.viewer.HtmlViewOptions.forEmbeddedResources("page.html")
// Enable converting all worksheets to one file.
viewOptions.setRenderToSinglePage(true)
viewer.view(viewOptions)

    The following image demonstrates the result:

    Convert all Excel worksheets to one HTML file

    Render spreadsheets as PDF

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

    Convert an Excel workbook to PDF 

    const viewer = new groupdocs.viewer.Viewer("invoice.xlsx")
// Convert the spreadsheet to PDF.
const viewOptions = groupdocs.viewer.PdfViewOptions("output.pdf")
viewer.view(viewOptions)

    The following image demonstrates the result:

    Render an Excel file to PDF

    Convert an Apple Numbers spreadsheet to PDF 

    const viewer = new groupdocs.viewer.Viewer("Products.numbers")
// Convert the spreadsheet to PDF.
const viewOptions = groupdocs.viewer.PdfViewOptions("output.pdf")
viewer.view(viewOptions)

    The following image demonstrates the result:

    Render an Apple Numbers spreadsheet to PDF

    Render spreadsheets as PNG

    Create a PngViewOptions class instance and pass it to the Viewer.view method to convert a spreadsheet file to PNG. Use the PngViewOptions.setHeight and PngViewOptions.setWidth methods to specify the output image size in pixels.

    Convert an Excel workbook to PNG 

    const viewer = new groupdocs.viewer.Viewer("invoice.xlsx")
// Convert the spreadsheet to PNG.
// {0} is replaced with the current page number in the file names.
const viewOptions = groupdocs.viewer.PngViewOptions("output_{0}.png")
// Set width and height.
viewOptions.setWidth(800)
viewOptions.setHeight(900)
viewer.view(viewOptions)
    The following image demonstrates the result:

    Render an Excel file to PNG

    Convert an Apple Numbers spreadsheet to PNG 

    const viewer = new groupdocs.viewer.Viewer("Products.numbers")
// Convert the spreadsheet to PNG.
// {0} is replaced with the current page number in the file names.
const viewOptions = groupdocs.viewer.PngViewOptions("output_{0}.png")
// Set width and height.
viewOptions.setWidth(800)
viewOptions.setHeight(900)
viewer.view(viewOptions)

    The following image demonstrates the result:

    Render an Apple Numbers spreadsheet to PNG

    Render spreadsheets as JPEG

    Create a JpgViewOptions class instance and pass it to the Viewer.view method to convert a spreadsheet file to JPEG. Use the JpgViewOptions.setHeight and JpgViewOptions.setWidth methods to specify the output image size in pixels.

    Convert an Excel workbook to JPEG 

    const viewer = new groupdocs.viewer.Viewer("invoice.xlsx")
// Convert the spreadsheet to JPEG.
// {0} is replaced with the current page number in the file names.
const viewOptions = groupdocs.viewer.JpgViewOptions("output_{0}.jpg")
// Set width and height.
viewOptions.setWidth(800)
viewOptions.setHeight(900)
viewer.view(viewOptions)

    Convert an Apple Numbers spreadsheet to JPEG 

    const viewer = new groupdocs.viewer.Viewer("Products.numbers")
// Convert the spreadsheet to JPEG.
// {0} is replaced with the current page number in the file names.
const viewOptions = groupdocs.viewer.JpgViewOptions("output_{0}.jpg")
// Set width and height.
viewOptions.setWidth(800)
viewOptions.setHeight(900)
viewer.view(viewOptions)

    Detect a CSV/TSV separator

    If you load a CSV/TSV file to convert it to another format, use the SpreadsheetOptions.setDetectSeparator method for a target view to automatically detect a delimiter used to separate values in the source file.

    GroupDocs.Viewer can detect the following separators:

    • A comma (the default separator)
    • A semicolon
    const viewer = new groupdocs.viewer.Viewer("sample.csv")
// Convert the spreadsheet to JPEG.
// {0} is replaced with the current page number in the file names.
const viewOptions = groupdocs.viewer.HtmlViewOptions.forEmbeddedResources("page_{0}.html")
// Detect a CSV/TSV separator.
viewOptions.getSpreadsheetOptions().setDetectSeparator(true)
viewer.view(viewOptions)

    Get worksheet names

    GroupDocs.Viewer allows you to obtain information about the source spreadsheet file. For example, you can retrieve worksheet names, as described below:

    1. Create a ViewInfoOptions instance for a specific view.
    2. Call the Viewer.getViewInfo method and pass the ViewInfoOptions instance to this method as a parameter.
    3. Use the getPages method of the returned ViewInfo object to access to the list of worksheets and retrieve the worksheet names.
    const viewer = new groupdocs.viewer.Viewer("sample.xlsx")
const viewInfoOptions = ViewInfoOptions.forHtmlView()
// Call this method to create a single page for each worksheet.
viewInfoOptions.setSpreadsheetOptions(SpreadsheetOptions.forOnePagePerSheet())
const ViewInfo viewInfo = viewer.getViewInfo(viewInfoOptions)
// Print the worksheet names in the console window.
console.log("The document contains the following worksheets:")
console.log(info.toString())

    The following image shows a sample console output:

    Retrieve worksheet names

    See also

    On this page

    © Groupdocs 2001-2024. All Rights Reserved.