Display Excel Data in HTML using REST API in Node.js

HTML web pages can be viewed in any browser available on handheld devices. Displaying Excel data on HTML pages helps show data to relevant stakeholders without sharing the actual Excel spreadsheet with them. So, they could view the required information/data in any browser easily. In this article, we will learn how to display Excel data in HTML using a REST API in Node.js.

The following topics shall be covered in this article:

Excel to HTML Viewer REST API and Node.js SDK

For rendering XLS or XLSX spreadsheets, I will be using Node.js SDK of GroupDocs.Viewer Cloud API. It allows rendering and viewing all sorts of popular documents and image file formats programmatically. Please install it using the following command in the console:

npm install groupdocs-conversion-cloud

Please get your Client ID and Secret from the dashboard before following the mentioned steps. Once you have your ID and secret, add in the code as shown below:

Display Excel Data in HTML using REST API in Node.js

We can display Excel data in HTML by following the simple steps given below:

  1. Upload the XLSX file to the Cloud
  2. Display Excel Data in HTML using Node.js
  3. Download the rendered file

Upload the Document

Firstly, we will upload the XLSX file to the Cloud using the code example given below:

As a result, the uploaded file will be available in the files section of the dashboard on the cloud.

Display Excel Data in HTML using Node.js

We can render or display Excel data on HTML pages programmatically by following the steps given below:

  • Firstly, create an instance of the ViewApi.
  • Next, create an instance of the FileInfo.
  • Then, set the input file path.
  • Next, create an instance of the ViewOptions.
  • Then, assign the FileInfo and set “HTML” as the viewFormat.
  • Next, create an instance of the HtmlOptions.
  • Then, initiate and assign the SpreadsheetOptions.
  • Next, set various options such as paginateSheets, textOverflowMode, renderGridLines, etc.
  • After that, create a view request by calling the CreateViewRequest method with viewOptions as an argument.
  • Finally, call the ViewApi.createView method with CreateViewRequest as an argument to render HTML.

The following code sample shows how to display Excel data in HTML using a REST API in Node.js.

Display Excel Data in HTML using Node.js

Display Excel Data in HTML using Node.js

By default, one worksheet is rendered into one page. We can customize the rendering of Excel by applying the following options:

  • Display an Excel Worksheets into Multiple Pages
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = true;
viewOptions.renderOptions.spreadsheetOptions.countRowsPerPage = 45;
  • Show Gridlines in HTML
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
  • Render Empty Rows and Columns
viewOptions.renderOptions.spreadsheetOptions.renderEmptyRows = true;
viewOptions.renderOptions.spreadsheetOptions.renderEmptyColumns = true;
  • Show Hidden Rows and Columns
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;
  • Render Print Area Only
viewOptions.renderOptions.spreadsheetOptions.renderPrintAreaOnly = true;
  • Set Text Overflow Mode
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = "HideText";

Download HTML Pages

The above code sample will save the rendered HTML page(s) on the cloud. It can be downloaded using the following code example:

Display Excel Data in HTML with Watermark using Node.js

We can add a watermark text while rendering Excel data to HTML pages programmatically by following the steps given below:

  • Firstly, create an instance of the ViewApi.
  • Next, create an instance of the FileInfo.
  • Then, set the input file path.
  • Next, create an instance of the ViewOptions.
  • Then, assign the FileInfo and set “HTML” as the viewFormat.
  • Next, create and assign an instance of the Watermark.
  • Then, set watermark size and text.
  • After that, create a view request by calling the CreateViewRequest method with the viewOptions as an argument.
  • Finally, call the ViewApi.createView method with CreateViewRequest as an argument to render HTML.

The following code sample shows how to display Excel data in HTML with watermark using a REST API in Node.js.

Display Excel Data in HTML with Watermark using Node.js

Display Excel Data in HTML with Watermark using Node.js

Try Online

Please try the following free online Excel rendering tool, which is developed using the above API. https://products.groupdocs.app/viewer/xlsx

Conclusion

In this article, we have learned how to display Excel data as HTML on the cloud. We have also seen how to add watermark to rendered HTML pages using Node.js. This article also explained how to programmatically upload an XLSX file to the cloud and then download the rendered HTML file from the Cloud. Besides, you can learn more about GroupDocs.Viewer Cloud API using the documentation. We also provide an API Reference section that lets you visualize and interact with our APIs directly through the browser. In case of any ambiguity, please feel free to contact us on the forum.

See Also