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 Community Edition提供久经考验的开源解决方案，可以从几乎任何复杂的电子表格中提取有用的数据，并生成新的电子表格，这些电子表格可以与传统和现代软件一起使用。

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!提供数据处理以外的解决方案：轻松编辑复杂的模板；通过造型展示你内心的毕加索；使用图像/图表/数据透视表制作自定义工作表；评估公式表达式并将计算结果移植到web应用程序；自动化常见的电子表格任务，等等！

Simple Examples简单示例

The code editors are live -- feel free to edit! They use ReactJS components and run entirely in the web browser.代码编辑器是实时的——请随意编辑！它们使用ReactJS组件，完全在web浏览器中运行。

Export an HTML Table to Excel XLSX将HTML表格导出到Excel XLSX

How to add to your site如何添加到您的网站 (click to show)

• HTML
• React

1) Make sure your table has an ID:确保您的桌子有一个ID：

<table id="TableToExport">

2) Include a reference to the SheetJS library in your page:在您的页面中包含对SheetJS库的引用：

<script src="https://cdn.sheetjs.com/xlsx-0.20.1/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:为click事件添加一个事件处理程序，以将表数据导出到XLSX：

<script>
document.getElementById("sheetjsexport").addEventListener('click', function() {
  /* Create worksheet from HTML DOM TABLE从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:本例假设您有一个现有的项目，其中包含一个HTML TABLE元素：

Sample Component示例组件

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:如果您是从头开始，请创建一个新的ViteJS+ReactJS项目：

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.将src/App.jsx替换为示例组件。

1) Install the SheetJS library using a package manager:使用包管理器安装SheetJS库：

• npm
• pnpm
• Yarn

npm i --save https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz

pnpm install https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz

yarn add https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz

2) Ensure that your component script imports useRef from the react library:确保组件脚本从react库导入useRef：

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如何使用NodeJS实现自动化 (click to show)

The "Headless Automation" demo“无头自动化”演示 includes complete examples using the puppeteer and playwright browser automation frameworks.包括使用puppeteer和playwright浏览器自动化框架的完整示例。

Live Example (click to hide)

Result

Loading...

Live Editor

/* <del>The live editor requires this function wrapper</del><ins>实时编辑器需要此函数包装器</ins> */ function Table2XLSX(props) { /* Callback invoked when the button is clicked */ const xport = React.useCallback(() => { /* Create worksheet from HTML DOM TABLE */ const table = document.getElementById("Table2XLSX"); const wb = XLSX.utils.table_to_book(table); /* Export to file (start a download) */ XLSX.writeFile(wb, "SheetJSTable.xlsx"); }); return ( <> <table id="Table2XLSX"><tbody> <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> </tbody></table> <button onClick={xport}><b>Export XLSX!</b></button> </> ); }

/* The live editor requires this function wrapper实时编辑器需要此函数包装器 */
function Table2XLSX(props) {

  /* Callback invoked when the button is clicked单击按钮时调用的回调 */
  const xport = React.useCallback(() => {
    /* Create worksheet from HTML DOM TABLE从HTML DOM TABLE创建工作表 */
    const table = document.getElementById("Table2XLSX");
    const wb = XLSX.utils.table_to_book(table);

    /* Export to file (start a download)导出到文件（开始下载） */
    XLSX.writeFile(wb, "SheetJSTable.xlsx");
  });

  return ( <>
    <table id="Table2XLSX"><tbody>
      <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>
    </tbody></table>
    <button onClick={xport}><b>Export XLSX!</b></button>
  </> );
}
 

SheetJS Pro Basic extends this export with support for CSS styling and rich text.通过支持CSS样式和富文本扩展了此导出。

Download and Preview Apple Numbers Workbooks下载并预览Apple Numbers工作簿

How to add to your site如何添加到您的网站 (click to show)

1) Create a container DIV for the table:为表创建一个容器DIV：

<div id="TableContainer"></div>

2) Include a reference to the SheetJS library in your page:在您的页面中包含对SheetJS库的引用：

<script src="https://cdn.sheetjs.com/xlsx-0.20.1/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替换为文件的URL */
  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生成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此演示处理了https://sheetjs.com/pres.numbers

Result

Loading...

Live Editor

/* <del>The live editor requires this function wrapper</del><ins>实时编辑器需要此函数包装器</ins> */ function Numbers2HTML(props) { const [__html, setHTML] = React.useState(""); /* <del>Fetch and update HTML</del><ins>获取并更新HTML</ins> */ React.useEffect(async() => { /* Fetch file */ const f = await fetch("https://sheetjs.com/pres.numbers"); const ab = await f.arrayBuffer(); /* Parse file */ const wb = XLSX.read(ab); const ws = wb.Sheets[wb.SheetNames[0]]; /* Generate HTML */ setHTML(XLSX.utils.sheet_to_html(ws)); }, []); return ( <div dangerouslySetInnerHTML={{ __html }}/> ); }

/* The live editor requires this function wrapper实时编辑器需要此函数包装器 */
function Numbers2HTML(props) {
  const [__html, setHTML] = React.useState("");

  /* Fetch and update HTML获取并更新HTML */
  React.useEffect(async() => {
    /* Fetch file获取文件 */
    const f = await fetch("https://sheetjs.com/pres.numbers");
    const ab = await f.arrayBuffer();

    /* Parse file */
    const wb = XLSX.read(ab);
    const ws = wb.Sheets[wb.SheetNames[0]];

    /* Generate HTML */
    setHTML(XLSX.utils.sheet_to_html(ws));
  }, []);

  return ( <div dangerouslySetInnerHTML={{ __html }}/> );
}
 

SheetJS Pro Basic extends this import with support for CSS styling and rich text.通过支持CSS样式和富文本扩展了此导入。

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.此示例从CSV字符串开始。使用“文件输入”元素可以选择要加载的工作簿。使用“导出XLSX”按钮将表格写入XLSX。

Result

Loading...

Live Editor

/* The live editor requires this function wrapper */ function Tabeller(props) { const [__html, setHTML] = React.useState(""); /* Load sample data once */ React.useEffect(() => { /* Starting CSV data -- change data here */ const csv = `\ This,is,a,Test வணக்கம்,สวัสดี,你好,가지마 1,2,3,4`; /* Parse CSV into a workbook object */ const wb = XLSX.read(csv, {type: "string"}); /* Get the worksheet (default name "Sheet1") */ const ws = wb.Sheets.Sheet1; /* Create HTML table */ setHTML(XLSX.utils.sheet_to_html(ws, { id: "tabeller" })); }, []); return ( <> {/* Import Button */} <input type="file" onChange={async(e) => { /* get data as an ArrayBuffer */ const file = e.target.files[0]; const data = await file.arrayBuffer(); /* parse and load first worksheet */ const wb = XLSX.read(data); const ws = wb.Sheets[wb.SheetNames[0]]; setHTML(XLSX.utils.sheet_to_html(ws, { id: "tabeller" })); }}/> {/* Export Button */} <button onClick={() => { /* Create worksheet from HTML DOM TABLE */ const table = document.getElementById("tabeller"); const wb = XLSX.utils.table_to_book(table); /* Export to file (start a download) */ XLSX.writeFile(wb, "SheetJSIntro.xlsx"); }}><b>Export XLSX!</b></button> {/* Show HTML preview */} <div dangerouslySetInnerHTML={{ __html }}/> </> ); }

/* The live editor requires this function wrapper实时编辑器需要此函数包装器 */
function Tabeller(props) {
  const [__html, setHTML] = React.useState("");

  /* Load sample data once加载样本数据一次 */
  React.useEffect(() => {
    /* Starting CSV data -- change data here启动CSV数据--在此处更改数据 */
    const csv = `\
This,is,a,Test
வணக்கம்,สวัสดี,你好,가지마
1,2,3,4`;

    /* Parse CSV into a workbook object将CSV解析为工作簿对象 */
    const wb = XLSX.read(csv, {type: "string"});

    /* Get the worksheet (default name "Sheet1")获取工作表（默认名称“Sheet1”） */
    const ws = wb.Sheets.Sheet1;

    /* Create HTML table */
    setHTML(XLSX.utils.sheet_to_html(ws, { id: "tabeller" }));
  }, []);

  return ( <>
    {/* Import Button */}
    <input type="file" onChange={async(e) => {
      /* get data as an ArrayBuffer将数据作为ArrayBuffer获取 */
      const file = e.target.files[0];
      const data = await file.arrayBuffer();

      /* parse and load first worksheet解析并加载第一个工作表 */
      const wb = XLSX.read(data);
      const ws = wb.Sheets[wb.SheetNames[0]];
      setHTML(XLSX.utils.sheet_to_html(ws, { id: "tabeller" }));
    }}/>

    {/* Export Button */}
    <button onClick={() => {

      /* Create worksheet from HTML DOM TABLE */
      const table = document.getElementById("tabeller");
      const wb = XLSX.utils.table_to_book(table);

      /* Export to file (start a download)导出到文件（开始下载） */
      XLSX.writeFile(wb, "SheetJSIntro.xlsx");
    }}><b>Export XLSX!</b></button>

    {/* Show HTML preview显示HTML预览 */}
    <div dangerouslySetInnerHTML={{ __html }}/>
  </> );
}
 

Browser Testing浏览器测试

Supported File Formats支持的文件格式