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

The industry leading Vue spreadsheet component, SpreadJS, is widely recognized for bringing Excel-like functionality to web applications, offering rich features and extensive customization options that make it ideal for interactive spreadsheet experiences. While the official SpreadJS documentation covers the basics of initializing workbooks and handling data, many developers need practical guidance for integrating these capabilities within modern frameworks like Vue.js.

In this blog post, we’ll explore how to build a Vue Excel XLSX Viewer using a Vue spreadsheet component. You’ll learn how to set up a Vue project, integrate the SpreadJS component, import Excel files directly in the browser, and apply sheet-level protection to secure your data.

Download a Trial of SpreadJS Today!

Steps to Create a Vue Excel XLSX Viewer Application

1. Create Your Vue Project for an Excel XLSX Viewer
2. Install SpreadJS Packages
3. Import SpreadJS in Your Vue App
4. Add the SpreadJS Component to Your Template
5. Initializing the Spreadsheet
6. Handle File Selection
7. Load Excel Files
8. Protect the Workbook
9. Run Application

Download a finished sample application to follow along.

Create Your Vue Project for an Excel XLSX Viewer

Before integrating SpreadJS to create a powerful Vue Excel XLSX Viewer, you need a base Vue project. Vue.js provides a modern, reactive framework that makes building web applications fast and efficient. By combining Vue with SpreadJS, you can render Excel spreadsheets in the browser, enable data interaction, and even protect your workbooks.

Use the Vue CLI to quickly scaffold a new project. Open your terminal and run:

npm create vue@latest

During the setup process, the CLI will prompt you to configure your project. Here’s what you can select based on your requirements:

After completing the prompts, Vue will scaffold the project structure in a folder with your chosen name.

Once the project is created, navigate to your project folder:

cd <your-project-name>
npm install

Then start the development server:

npm run dev

Open your browser at http://localhost:5173. You should see your Vue application running, ready for integrating SpreadJS to create your interactive Vue Excel XLSX viewer.

For guidance on getting started with Vue, please refer to our SpreadJS documentation ‘SpreadJS with Vue’.

Install SpreadJS Packages

SpreadJS provides a set of NPM packages for Vue that make integration smooth. To get started with creating your Vue Excel XLSX Viewer, you will need the following:

• @mescius/spread-sheets – Core SpreadJS library
• @mescius/spread-sheets-vue – Vue component integration
• @mescius/spread-sheets-io – Utilities for importing/exporting Excel files

Command:

npm install @mescius/spread-sheets @mescius/spread-sheets-vue @mescius/spread-sheets-io

Import SpreadJS in Your Vue App

In this step, we set up SpreadJS in our Vue application by importing the necessary modules and styles into App.vue. By importing these modules at the start, we prepare our Vue app to render Excel spreadsheets.

import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@mescius/spread-sheets";
import "@mescius/spread-sheets-vue";
import "@mescius/spread-sheets-io";

Add the SpreadJS Component to Your Template

To start building your Vue Excel XLSX Viewer, you need to add the <gc-spread-sheets> component to your Vue template. This component is the core of the SpreadJS library and allows you to render a fully interactive spreadsheet in the browser, just like Excel.

In the template below, we also create an options-container sidebar for file upload and worksheet protection controls:

<template>
  <div style="display: flex;">
    <!-- SpreadJS Excel Viewer Component -->
    <gc-spread-sheets class="spread-host" @workbookInitialized="initWorkbook"></gc-spread-sheets>
    <!-- Sidebar Controls for File Upload and Protection -->
    <div class="options-container">
      <p>Open Excel Files (.xlsx)</p>
      <input type="file" accept=".xlsx" @change="changeFileDemo" />
      <input type="button" value="Import" class="button" @click="loadExcel" />
      <p style="margin-top: 20px;">Worksheet Protection</p>
      <input type="button" value="Protect" class="button" @click="setProtectSheet" />
      <input type="button" value="Unprotect" class="button" @click="setUnprotectSheet" />
    </div>
  </div>
</template>

Initializing the Spreadsheet

In this step, we initialize the SpreadJS workbook once it’s fully loaded in our Vue app. The @workbookInitialized event from the <gc-spread-sheets> component triggers the initWorkbook function, giving us access to the SpreadJS workbook instance (spreadInstance).

Inside this function, we store the instance in a local variable and access the active worksheet using getActiveSheet(). Then, we set default text values in the first few cells to verify that our spreadsheet is working correctly.

function initWorkbook(spreadInstance) {
  spread = spreadInstance;

  const sheet = spread.getActiveSheet();

  sheet.setValue(0, 0, "Vue + SpreadJS Excel Viewer");
  sheet.setValue(1, 0, "Import an Excel file to view it below.");
}

The image below shows the Vue project running in the browser after setup. The default text appears in the first few cells, confirming that the SpreadJS workbook has been successfully initialized.

Refer to our Quick Start Demo or Documentation for further guidance on getting started.

Handle File Selection

In this step, we implement logic to capture the Excel file we choose. The changeFileDemo function listens for changes on the file input and stores the selected file in a variable. This allows the loadExcel function to access the file later for import.

function changeFileDemo(e) {
  selectedFile.value = e.target.files[0];
}

Load Excel Files

In this step, we handle loading the selected Excel file into the SpreadJS workbook. The loadExcel function ensures a file has been selected, checks its type (.xlsx), and uses the SpreadJS import method to load it into the spreadsheet.

function loadExcel() {
  if (!selectedFile.value) {
    alert("Please select a file first!");
    return;
  }
  const fileName = selectedFile.value.name.toLowerCase();
  const fileExt = fileName.split(".").pop();
  const fileType =
    fileExt === "xlsx"
      ? GC.Spread.Sheets.FileType.excel
      : null;
  if (!fileType) {
    alert("Unsupported file type!");
    return;
  }
  spread.import(
    selectedFile.value,
    () => {
      console.log("File Loaded Successfully");
      protectWorkbook();
    },
    (err) => {
      console.error("Import failed:", err);
      alert("Failed to import Excel file.");
    },
    { fileType }
  );
}

After selecting an Excel (.xlsx) file using the Choose File button, clicking Import will load the file into our Vue Excel XLSX Viewer. The workbook will be automatically protected upon import, preventing unwanted edits until you choose to unprotect it using the Unprotect button described below.

Workbook Protection

In this step, we implement protection for worksheets in the workbook. After an Excel file is loaded, we protect all sheets in the workbook to prevent unintended edits. Using sheet.options.protectionOptions, we allow cell selection but disable editing, inserting, deleting, resizing, sorting, and filtering. This ensures imported data is secure while remaining viewable.

For more detailed guidance on worksheet protection and password settings, you can refer to Protect Sheet with Password of official SpreadJS documentation. 

function protectWorkbook() {
  const sheetCount = spread.getSheetCount();
  for (let i = 0; i < sheetCount; i++) {
    const sheet = spread.getSheet(i);
    sheet.options.isProtected = true;
    sheet.options.protectionOptions = {
      allowSelectLockedCells: true,
      allowSelectUnlockedCells: true,
      allowSort: false,
      allowFilter: false,
      allowEditObjects: false,
      allowResizeRows: false,
      allowResizeColumns: false,
      allowInsertRows: false,
      allowDeleteRows: false,
      allowInsertColumns: false,
      allowDeleteColumns: false,
    };
    sheet.protect(password); 
  }
  console.log("All sheets are protected with custom options.");
  alert("Workbook imported and protected with password");
}

If you need to allow edits to a protected sheet, the Unprotect button calls setUnprotectSheet(). 

This function prompts the user for a password and removes protection from the active sheet if the password is correct.

For more detailed guidance on unprotection worksheet you can refer to Unprotect method of official SpreadJS documentation. 

function setUnprotectSheet() {
  const sheet = spread.getActiveSheet();
  if (!sheet.options.isProtected) {
    alert("Sheet is already unprotected!");
    return;
  }

  const userPassword = prompt("Enter the password to unprotect this sheet:");
  if (userPassword === null) return;

  const success = sheet.unprotect(userPassword);
  if (!success) {
    alert("Incorrect password!");
  } else {
    alert("Sheet unprotected successfully!");
  }
}

After unprotecting the active sheet and making the necessary changes, you can reapply protection to the same sheet using the setProtectSheet() function.

The setProtectSheet() function applies the same protection options to the currently active sheet, useful for selectively securing a sheet without affecting others.

function setProtectSheet() {
  const sheet = spread.getActiveSheet();
  if (sheet.options.isProtected) {
    alert("The worksheet is already protected!");
    return;
  }
  sheet.options.protectionOptions = {
    allowSelectLockedCells: true,
    allowSelectUnlockedCells: true,
    allowSort: false,
    allowFilter: false,
    allowEditObjects: false,
    allowResizeRows: false,
    allowResizeColumns: false,
    allowInsertRows: false,
    allowDeleteRows: false,
    allowInsertColumns: false,
    allowDeleteColumns: false,
  };
  sheet.protect(password);
  alert("Sheet protected with custom options!");
}

Run Your Application

In this final step, we start the Vue development server to see our Vue Excel XLSX Viewer in action. By running npm run dev, the app launches locally, allowing you to test importing Excel files, viewing them in the spreadsheet, and verifying that workbook protection is applied correctly.

Open http://localhost:5173 in your browser to interact with your fully functional Excel viewer built with Vue and SpreadJS.

Conclusion

With this setup on SpreadJS, users can import Excel files, explore their contents, and interact with spreadsheets directly in the browser. This approach provides a powerful, client-side solution for building responsive and feature-rich Excel viewers in Vue applications.

By following these steps, you now have a solid foundation to expand your viewer with additional features like custom formatting, formulas, filtering, and more. You can explore all these features by checking out our online demo explorer, documentation, blogs, and videos to see all the features and use cases SpreadJS can fulfill.