SheetJS CE
SheetJS Community Edition offers battle-tested open-source solutions for extracting useful data from almost any complex spreadsheet and generating new spreadsheets that will work with legacy and modern software alike.
SheetJS Pro offers solutions beyond data processing: Edit complex templates with ease; let out your inner Picasso with styling; make custom sheets with images/graphs/PivotTables; evaluate formula expressions and port calculations to web apps; automate common spreadsheet tasks, and much more!
Simple Examples
The code editors are live -- feel free to edit! They use ReactJS components and run entirely in the web browser.
Export an HTML Table to Excel XLSX
How to add to your site (click to show)
- HTML
- React
1) Make sure your table has an ID:
<table id="TableToExport">
2) Include a reference to the SheetJS library in your page:
<script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
3) Add a button that users will click to generate an export
<button id="sheetjsexport"><b>Export as XLSX</b></button>
4) Add an event handler for the click
event to export table data to XLSX:
<script>
document.getElementById("sheetjsexport").addEventListener('click', function() {
/* Create worksheet from HTML DOM TABLE */
var wb = XLSX.utils.table_to_book(document.getElementById("TableToExport"));
/* Export to file (start a download) */
XLSX.writeFile(wb, "SheetJSTable.xlsx");
});
</script>
This example assumes you have an existing project with an HTML TABLE element:
function App() {
return ( <>
<h3>SheetJS Table</h3>
<table>
<tr><td colSpan="3">SheetJS Table Export</td></tr>
<tr><td>Author</td><td>ID</td><td>你好!</td></tr>
<tr><td>SheetJS</td><td>7262</td><td>வணக்கம்!</td></tr>
<tr><td colSpan="3">
<a href="//sheetjs.com">Powered by SheetJS</a>
</td></tr>
</table>
</> )
}
export default App;
If you are starting from scratch, create a new ViteJS + ReactJS project:
npm create vite@latest -- sheetjs-react --template react --default
cd sheetjs-react
npm install
npm run dev
Replace src/App.jsx
with the sample component.
1) Install the SheetJS library using a package manager:
- npm
- pnpm
- Yarn
npm i --save https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz
pnpm install https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz
yarn add https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz
2) Ensure that your component script imports useRef
from the react
library:
import { useRef } from "react";
3) Add the following line at the top of your component script:
import { utils, writeFileXLSX } from "xlsx";
4) Create a ref in the body of your function component:
function App() {
const tbl = useRef(null);
// ...
5) Attach the ref to the table element:
function App() {
// ...
return (
{/*...*/}
<table ref={tbl}>
{/*...*/}
6) Add a button with a click handler that will export table data to XLSX:
function App() {
// ...
return (
{/*...*/}
<button onClick={() => {
// generate workbook from table element
const wb = utils.table_to_book(tbl.current);
// write to XLSX
writeFileXLSX(wb, "SheetJSReactExport.xlsx");
}}>Export XLSX</button>
{/*...*/}
How to automate with NodeJS (click to show)
The "Headless Automation" demo includes complete examples
using the puppeteer
and playwright
browser automation frameworks.
Live Example (click to hide)
Download and Preview Apple Numbers Workbooks
How to add to your site (click to show)
1) Create a container DIV for the table:
<div id="TableContainer"></div>
2) Include a reference to the SheetJS library in your page:
<script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
3) Add a script block to download and update the page:
<script>
(async() => {
/* replace with the URL of the file */
const URL_TO_DOWNLOAD = "https://sheetjs.com/pres.numbers";
const ab = await (await fetch(URL_TO_DOWNLOAD)).arrayBuffer();
/* Parse file and get first worksheet */
const wb = XLSX.read(ab);
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
/* Generate HTML */
var output = document.getElementById("TableContainer");
output.innerHTML = XLSX.utils.sheet_to_html(ws);
})();
</script>
Live Example (click to hide)
This demo processes https://sheetjs.com/pres.numbers
Preview a workbook on your device
Live Example (click to hide)
This example starts from a CSV string. Use the File Input element to select a workbook to load. Use the "Export XLSX" button to write the table to XLSX.