How to Add a JavaScript Excel XLSX Viewer to Your Web Application

May 14 2025
0 Comments

Quick Start Guide
Tutorial Concept	Learn how to integrate a secure client-side Excel .XLSX viewer using a JavaScript spreadsheet component.
What You Will Need	NPM Packages: @mescius/spread-sheets @mescius/spread-sheets-io @mescius/spread-sheets-charts @mescius/spread-sheets-shapes
Controls Referenced	SpreadJS - JavaScript Spreadsheet Component Documentation \| Demos

Quick Start Guide

Tutorial Concept

Learn how to integrate a secure client-side Excel .XLSX viewer using a JavaScript spreadsheet component.

What You Will Need

NPM Packages:

Controls Referenced

SpreadJS - JavaScript Spreadsheet Component

Documentation | Demos

Many businesses rely on spreadsheets like Microsoft Excel to manage operations, making it essential to handle these files in modern JavaScript applications. SpreadJS, a JavaScript spreadsheet component, lets you load, view, edit, and save complex XLSX files in the browser. In this blog, we'll show you how to build an XLSX Viewer using SpreadJS, including importing Excel files and protecting sheets to control user edits.

Add Spreadsheets to Your JavaScript Enterprise Web Apps. Download SpreadJS Now!

How to Add an Excel XLSX Viewer to JavaScript Web Applications

Create a JavaScript Spreadsheet Application
Add Excel Import Code - Import Method
Password Protect the JS Excel Viewer - Protect/Unprotect Methods

JavaScript Excel .xlsx Viewer Component

Download a Sample JavaScript Application to Follow Along with the Tutorial.

Create a JavaScript Spreadsheet Application

Create a simple HTML file, including a DOM element for the JavaScript spreadsheet viewer and a side panel with options to choose from, and input an existing XLSX file. Then, set a password and protect or unprotect the worksheet.

<body>
<div style="display: flex; flex-direction: row; align-items: flex-start;">
    <!-- Spreadsheet Viewer -->
    <div id="spreadContainer" style="width: 925px; height: 600px;"></div>
    <!-- Side Panel -->
    <div id="sidebar" style="width: 275px; padding: 20px; background: #ddd; margin-left: 10px;">
        <p>Open Excel File (.xlsx):</p>
        <input type="file" id="fileInput" />
        <button id="openButton">Open Excel</button>
        <div style="margin-top: 20px;">
            <img id="protectStatus" src="data:image/png;base64...." alt="Protection Status" style="height: 25px;" />
            <p>Password:
            <input type="password" id="passwordInput" />
            </p>
            <button id="protectBtn">Protect</button>
            <button id="unprotectBtn">Unprotect</button>
        </div>
    </div>
</div>
</body>

Install the necessary JavaScript Spreadsheet Component NPM packages.

npm install @mescius/spread-sheets
npm install @mescius/spread-sheets-io
npm install @mescius/spread-sheets-charts
npm install @mescius/spread-sheets-shapes

Alternatively, download and install the associated SpreadJS release script files.

Be sure to add a reference to these packages in the HTML file.

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- SpreadJS CSS File -->
    <link rel="stylesheet" type="text/css" href="./node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
    <!-- SpreadJS JS Script Files-->
    <script src="./node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
    <script src="./node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js" type="text/javascript"></script>
    <script src="./node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
    <script src="./node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
    <!-- JS Spreadsheet Code file -->
    <script src="./app.js" type="text/javascript"></script>
</head>

Lastly, initialize the JavaScript XLSX viewer using the SpreadJS APIs Workbook constructor and passing the DOM element previously created by its ID.

window.onload = function () {
  // Initialize the JS XSLX viewer instance
  let spread = new GC.Spread.Sheets.Workbook(
    document.getElementById("spreadContainer"),
    { sheetCount: 2 }
);

The JavaScript application will now show the spreadsheet instance. Next, let's add some functionality to the side panel.

JavaScript Excel File Viewer Project

See our Quick Start Demo or Documentation for additional information on getting started with this JavaScript spreadsheet control.

Add Excel Import Code to a JavaScript Application

Depending on the application, you may want to allow end users to import an existing .xlsx file into the JavaScript Excel viewer application. To accomplish this, we will implement event listeners to capture a selected .xlsx file, and then invoke the JS spreadsheet API's import method on button click.

document.getElementById("openButton").addEventListener("click", openExcelFile);
let selectedFile = null;
// File input change
document.getElementById("fileInput").addEventListener("change", (e) => {
    selectedFile = e.target.files[0];
});
// Open the Excel file
function openExcelFile() {
    if (!selectedFile) return;
    const options = {fileType: GC.Spread.Sheets.FileType.excel,};
    spread.import(selectedFile,() => {console.log("Import successful");},
      (error) => {console.error("Import error:", error);},
      options
    );
  }

Notice the XLSX file can now be imported into the JS Excel Viewer application:

Open an .xlsx File in a JS Excel Viewer Control

See our Online Import/Export Demo Explorer or Documentation to learn more about the import and exporting capabilities of SpreadJS.

Password Protect the JavaScript Excel Viewer

Once the end user imports the file, they may want to protect the workbook using a password to prevent specific users from making changes. Using the JS spreadsheet API, developers can add this capability by invoking the Worksheet's protect and unprotect methods.

In this setProtectSheet() function, get the active worksheet, check to see if it is already protected, and if not, then invoke the protect method with a password if one is applied.

function protectSheet() {
    let sheet = spread.getActiveSheet();
    if (sheet.options.isProtected) { alert(alreadyProtect); return; }
    let password = document.getElementById("passwordInput").value;
    sheet.protect(password);
    document.getElementById("protectStatus").src = protectImg;
    document.getElementById("passwordInput").value = "";
  }

In this setUnprotectSheet() function, allow authorized users to unprotect a worksheet to make changes by providing a password and invoking the unprotect method.

function unprotectSheet() {
    let sheet = spread.getActiveSheet();
    let password = document.getElementById("passwordInput").value;
    if (sheet.hasPassword()) {
      let success = sheet.unprotect(password);
      if (!success) { alert(passwordWrongTip); return; }
    } else { sheet.unprotect(); }
    document.getElementById("protectStatus").src = unprotectImg;
    document.getElementById("passwordInput").value = "";
  }

Notice that users can now protect and unprotect the JavaScript spreadsheet using a set password.

Allow Users to Protect and Unprotect a JavaScript Excel Viewer Control

Check out the online Protect Worksheet Demo or the Documentation and learn more about the protection and cell locking/unlocking capabilities.

Looking for an Enterprise JavaScript Spreadsheet? Try SpreadJS Today!

JavaScript Spreadsheet Component

This blog tutorial only scratches the surface of the full capabilities of the JavaScript spreadsheet component, SpreadJS. Check out our online demo explorer, documentation, blogs, and videos to see all the features and use cases SpreadJS can fulfill.

Looking for a different framework or platform? Explore the rest of our blog series to learn how to build Excel .xlsx Viewer apps across various environments: