Sitemap
MESCIUS inc.

Sharing stories, concepts, and code.

How to Import and Export Excel XLSX Using JavaScript

--

Import and Export Excel XLSX Files from a JavaScript Spreadsheet Aplpication

Tutorial Concept: Learn how to import, modify, and export Excel (.xlsx) files in JavaScript applications.

What You Will Need:

Controls Referenced: SpreadJS — JavaScript Spreadsheet Component

Why Importing and Exporting Excel Files in JavaScript Matters

In modern enterprise applications, Excel remains a crucial tool for managing business data — whether it’s for internal operations or external client submissions. With the shift toward web-based platforms, developers must ensure these Excel spreadsheets (.xlsx) can be seamlessly imported, modified, and exported within JavaScript applications.

This guide will walk you through how to import and export Excel (.xlsx) files using JavaScript with the help of SpreadJS, a powerful JavaScript spreadsheet component. We’ll build a fully functional example that loads an Excel file into a spreadsheet UI, adds new data, and exports the updated file — all in the browser.

In modern enterprise applications, Excel remains a crucial tool for managing business data — whether it’s for internal operations or external client submissions. With the shift toward web-based platforms, developers must ensure these Excel spreadsheets (.xlsx) can be seamlessly imported, modified, and exported within JavaScript applications.

This guide will walk you through how to import and export Excel (.xlsx) files using JavaScript with the help of SpreadJS, a powerful JavaScript spreadsheet component. We’ll build a fully functional example that loads an Excel file into a spreadsheet UI, adds new data, and exports the updated file — all in the browser.

Overview: Import/Export Excel XLSX in JavaScript

  1. Create a JavaScript Spreadsheet Project
  2. Open Excel (.xlsx) Files using the Import Method
  3. Modify the Excel File: Add Data & Sparklines
  4. Save Excel (.xlsx) Files using the Export Method

You can follow along using this StackBlitz sample, video tutorial, or download a full sample project.

1. Create a JavaScript Spreadsheet Project

Start by installing the required packages. Open your terminal and run:

npm install @mescius/spread-sheets 
npm install @mescius/spread-sheets-io
npm install file-saver

We’ll be using:

Next, import the necessary modules and styles:

import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
import * as GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-io';
import 'file-saver';

In your HTML, include a container for the spreadsheet:

<div id="hostElement"></div>

Now initialize the SpreadJS workbook inside this container:

var workbook = new GC.Spread.Sheets.Workbook('hostElement');

You now have a basic spreadsheet rendered in your JavaScript app!

2. Open Excel (.xlsx) Files using the Import Method

Add an input and button to let users select a file:

<input type="file" id="selectedFile" accept=".xlsx" />
<button id="btnImport">Import</button>

Add the following import function to handle file loading:

document.getElementById('btnImport').addEventListener('click', function() {
var file = document.querySelector('#selectedFile').files[0];
if (file) {
workbook.import(file);
}
});

This lets users upload and view .xlsx files directly in the browser.

Import an Excel File into a JavaScript Spreadsheet App

3. Modify the Excel File: Add Data & Sparklines

Let’s simulate adding a new revenue row to a sample “Profit & Loss” spreadsheet.

Add a button to trigger the update:

<button id="addRevenue">Add htRevenue</button> 

Here’s the JavaScript to add a new row with values ,styles, and formulas:

document.getElementById('addRevenue').addEventListener('click', function() {
var revenueCount = 8;
var newRowIndex = 11;


var sheet = workbook.getActiveSheet();
sheet.addRows(newRowIndex, 1);
sheet.copyTo(10, 1, newRowIndex, 1, 1, 29, GC.Spread.Sheets.CopyToOptions.style);

var cellText = 'Revenue ' + revenueCount++;
sheet.setValue(newRowIndex, 1, cellText);

for (let c = 3; c < 15; c++) {
sheet.setValue(newRowIndex, c, Math.floor(Math.random() * 200) + 10);
}

var data = new GC.Spread.Sheets.Range(newRowIndex, 3, 1, 12);
var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();
setting.options.seriesColor = 'Text 2';
setting.options.lineWeight = 1;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.lowMarkerColor = 'Text 2';
setting.options.highMarkerColor = 'Text 1';

sheet.setSparkline(newRowIndex, 2, data, GC.Spread.Sheets.Sparklines.DataOrientation.horizontal, GC.Spread.Sheets.Sparklines.SparklineType.line, setting);

sheet.setFormula(newRowIndex, 15, '=SUM([@[Jan]:[Dec]])');
newRowIndex++;
sheet.setValue(newRowIndex, 16, 0.15);

sheet.copyTo(10, 17, newRowIndex, 17, 1, 13, GC.Spread.Sheets.CopyToOptions.formula);

});

To boost performance while updating, suspend painting and calculations:

workbook.suspendPaint();  
workbook.suspendCalcService();
// ... perform data updates here ...
workbook.resumeCalcService();
workbook.resumePaint();

With this code logic, users now see the sparklines and can add a new revenue row to the imported XSLX file.

Add data to an Excel File in a JavaScript Application

4. Save Excel (.xlsx) Files using the Export Method

Now, let’s export the updated file. Add these elements:

<input type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" />
<button id="btnExport">Export File</button>

And the export logic, including invoking the export function:

document.getElementById('btnExport').addEventListener('click', function() {
var fileName = document.getElementById('exportFileName').value;
if (!fileName.endsWith('.xlsx')) {
fileName += '.xlsx';
}

workbook.export((blob) => {
saveAs(blob, fileName);
}, (error) => {
console.log(error);
}, {
fileType: GC.Spread.Sheets.FileType.excel
});
});

Once exported, the file retains all your edits and is ready to open in Excel!

Bonus: Support Charts, Shapes, and PivotTables

If you want to import and export Excel files with Charts, Shapes and PivotTables, make sure to include those optional add-on modules for SpreadJS:

Explore More Features

This tutorial covers the basics of how to import/export Excel .xlsx in JavaScript, but SpreadJS offers much more — including rich formatting, , 500+ Calc functions and custom formulas, validation, and full Excel compatibility. Check out the SpreadJS Documentation and Demos to see what’s possible

--

--

MESCIUS inc.
MESCIUS inc.

Written by MESCIUS inc.

We provide developers with the widest range of Microsoft Visual Studio components, IDE platform development tools, and applications.

No responses yet