How to Build an HTML5 Excel (XLS and XLSX) Viewer

In this blog post, learn how to build an HTML5 Excel viewer using the PSPDFKit for Web SDK. You’ll open and view XLS or XLSX files directly in your web browser using client-side processing (no server required).

The image below shows what you’ll be building.

You can check out the demo(opens in a new tab) to see it in action.

Opening and Rendering Office Documents in the Browser

PSPDFKit for Web brings support for Word, Excel, and PowerPoint formats to your application, without you or your users needing any MS Office software, MS Office licenses, or third-party open source software. The technology works by converting an Office document to PDF directly in the browser, and the document is then rendered in our JavaScript viewer.

For both manual and npm installations, it's important to note that the assets must be copied to a public folder. Make sure your server has the Content-Type: application/wasm MIME type set, as explained in our troubleshooting guide.

To serve the files, you need to use an npm package like serve(opens in a new tab) as a simple HTTP server.

Unlocking More Capabilities with Office-to-PDF Conversion

​​By converting an Office document to PDF using client-side JavaScript, you have the option to support a rich array of additional Office document functionality, such as:

• Text editing — Edit text directly in the displayed Office document.
• Page manipulation — Organize documents by adding, removing, or rearranging pages.
• Annotations — Boost collaboration by adding text highlights, comments, or stamps.
• Adding signatures — Draw, type, or upload a signature directly to an Office document.

Requirements to Get Started

To get started, you’ll need:

• The latest stable version of Node.js(opens in a new tab).
• A package manager compatible with npm(opens in a new tab). This guide contains usage examples for the npm client(opens in a new tab) (installed with Node.js by default).

Adding Nutrient to your project

1. Install the @nutrient-sdk/viewer package:

   • npm
   • pnpm
   • yarn
   npm

   npm i @nutrient-sdk/viewer

2. Copy the required viewer artifacts to your assets directory:

   cp -R ./node_modules/@nutrient-sdk/viewer/dist/ ./assets/

Make sure the assets directory contains:

• nutrient-viewer.js (or an equivalent main script)
• A nutrient-viewer-lib/ directory with supporting library files

Integrating into your project

1. Include a sample document (e.g. document.xls) in the public or root folder of your project.

2. Add a mounting <div> and a script reference to your HTML:

   <div id="nutrient" style="width: 100%; height: 100vh;"></div>
   <script type="module" src="index.js"></script>

3. Import the viewer in your JavaScript entry file:

   import "./assets/nutrient-viewer.js";

4. Initialize the viewer using NutrientViewer.load():

   const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;
   
   NutrientViewer.load({
       baseUrl,
       container: "#nutrient",
       document: "document.xls",
   })
   .then((instance) => {
       console.log("Nutrient loaded", instance);
   })
   .catch((error) => {
       console.error(error.message);
   });

Serving your website

1. Install the serve package globally:

   npm install --global serve

2. Start a local server from the current directory:

   serve -l 8080 .

3. Open your browser and go to http://localhost:8080 to view your website.

A Note about Fonts

In client-side web applications for Microsoft Office-to-PDF conversion, PSPDFKit addresses font licensing constraints through font substitutions, typically replacing unavailable fonts with their equivalents — like Arial with Noto. For precise font matching, you can provide your own fonts, embed them into source files, or designate paths to your .ttf fonts for custom solutions.

Adding Even More Capabilities

Once you’ve deployed your viewer, you can start customizing it to meet your specific requirements or easily add more capabilities. To help you get started, here are some of our most popular HTML5 guides:

• Instant synchronization
• Document assembly
• Page manipulation
• Editor
• Forms
• Signatures
• Redaction
• Document security

Conclusion

In this blog post, you learned how to build an Excel viewer using HTML5 with the PSPDFKit SDK. It also discussed the benefits of using PSPDFKit for Web Standalone to render Office documents in the browser. If you hit any snags, don’t hesitate to reach out to our Support team(opens in a new tab) for help.

You can also integrate our HTML5 Excel viewer using web frameworks like Angular, Vue.js, and React.js. To see a list of all web frameworks, start your free trial. Or, launch our demo(opens in a new tab) to see our viewer in action.