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社区版提供了经过战斗测试的开源解决方案，用于从几乎任何复杂的电子表格中提取有用的数据，并生成新的电子表格，这些表格将与传统和现代软件一起使用。

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! Due to technical limitations, they showcase ReactJS patterns.代码编辑器是实时的——请随意编辑！由于技术限制，他们展示了ReactJS模式。Other parts of the documentation will cover more common use cases including plain JavaScript.文档的其他部分将涵盖更常见的用例，包括纯JavaScript。

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

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

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-latest/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 create a workbook and download:为click事件添加事件处理程序以创建工作簿并下载：

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");
});

Live Example (click to hide)

Result

Loading...

Live Editor实时编辑器

/* The live editor requires this function wrapper */ function Table2XLSX(props) { /* Callback invoked when the button is clicked */ const xport = React.useCallback(async () => { /* 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>Note</td></tr> <tr><td>SheetJS</td><td>7262</td><td>Hi!</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(async () => {
      /* 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>Note</td></tr>
      <tr><td>SheetJS</td><td>7262</td><td>Hi!</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 a Numbers workbook下载并预览数字工作簿

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-latest/package/dist/xlsx.full.min.js"></script>

3) Add a script block to download and update the page:添加脚本块以下载和更新页面：

<script>
(async() => {
  const f = await fetch(URL_TO_DOWNLOAD); // replace with the URL of the file
  const ab = await f.arrayBuffer();

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

  /* Generate HTML */
  var output = document.getElementById("TableContainer");
  output.innerHTML = XLSX.utils.sheet_to_html(ws);
})();
</script>

Live Example (click to show)

Result

Loading...

Live Editor

/* The live editor requires this function wrapper */ function Numbers2HTML(props) { const [html, setHTML] = React.useState(""); /* Fetch and update 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: html}}/>); }

/* The live editor requires this function wrapper */
function Numbers2HTML(props) {
  const [html, setHTML] = React.useState("");

  /* Fetch and update 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: html}}/>);
}

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

Convert a CSV file to HTML Table and Excel XLSX将CSV文件转换为HTML表格和Excel XLSX

Live Example (click to show)

Result

Loading...

Live Editor

/* The live editor requires this function wrapper */ function Tabeller(props) { /* 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 */ const id = "tabeller"; // HTML TABLE ID const __html = XLSX.utils.sheet_to_html(ws, { id }); return (<> {/* Show HTML preview */} <div dangerouslySetInnerHTML={{__html}}/> {/* Export Button */} <button onClick={() => { /* Create worksheet from HTML DOM TABLE */ const table = document.getElementById(id); const wb = XLSX.utils.table_to_book(table); /* Export to file (start a download) */ XLSX.writeFile(wb, "SheetJSIntro.xlsx"); }}> <b>Export XLSX!</b> </button> </>); }

/* The live editor requires this function wrapper */
function Tabeller(props) {

  /* 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 */
  const id = "tabeller"; // HTML TABLE ID
  const __html = XLSX.utils.sheet_to_html(ws, { id });

  return (<>

    {/* Show HTML preview */}
    <div dangerouslySetInnerHTML={{__html}}/>

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

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

      /* Export to file (start a download) */
      XLSX.writeFile(wb, "SheetJSIntro.xlsx");
    }}>
      <b>Export XLSX!</b>
    </button>

  </>);

}

Browser Testing

Supported File Formats