開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目，包括技術、學習、實用與各種有趣的內容。本期推薦的SheetJS是適用于傳統和現代軟件的新電子表格。

SheetJS 社區版提供了久經考驗的開源解決方案，用于從幾乎任何復雜的電子表格中提取有用的數據，并生成適用于傳統和現代軟件的新電子表格。

SheetJS Pro提供超越數據處理的解決方案：輕松編輯復雜模板；用造型釋放你內心的畢加索；使用圖像/圖表/數據透視表制作自定義工作表；評估公式表達式和端口計算到 Web 應用程序；自動化常見的電子表格任務等。

兼容性

SheetJS入門

安裝

完整的瀏覽器獨立構建保存dist/xlsx.full.min.js并可以直接添加到帶有<script>標簽的頁面：

<script lang="javascript" src="dist/xlsx.full.min.js"></script>

每個獨立的發布腳本都可以在https://cdn.sheetjs.com/獲得。最新版本使用latest標簽：

<!-- use the latest version -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>

可以通過版本引用特定的發行版：

<!-- use version 0.18.5 -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.18.5/package/dist/xlsx.full.min.js"></script>

對于生產用途，應下載腳本并將其與其他腳本一起添加到公用文件夾中。

瀏覽器構建

完整的單文件版本生成于dist/xlsx.full.min.js

dist/xlsx.core.min.js省略代碼頁庫（不支持 XLS 編碼）

在dist/xlsx.mini.min.js. 與完整版本相比：

• 跳過代碼頁庫（不支持 XLS 編碼）
• 不支持 XLSB / XLS / Lotus 1-2-3 / SpreadsheetML 2003 / Numbers
• 節點流實用程序已刪除

這些腳本也可在 CDN 上找到：

<!-- use xlsx.mini.min.js from the latest version -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.mini.min.js"></script>

ECMAScript 模塊

ECMAScript 模塊構建被保存到xlsx.mjs并可以直接添加到帶有script標簽的頁面，使用type="module"：

<script type="module">
import { read, writeFileXLSX } from "https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs";

/* load the codepage support library for extended support with older formats  */
import { set_cptable } from "https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs";
import * as cptable from 'https://cdn.sheetjs.com/xlsx-latest/package/dist/cpexcel.full.mjs';
set_cptable(cptable);
</script>

NodeJS 包還公開了帶有module參數的模塊，Angular 和其他項目都支持該參數：

import { read, writeFileXLSX } from "xlsx";

/* load the codepage support library for extended support with older formats  */
import { set_cptable } from "xlsx";
import * as cptable from 'xlsx/dist/cpexcel.full.mjs';
set_cptable(cptable);

SheetJS用法

大多數涉及電子表格和數據的場景可以分為 5 個部分：

• 獲取數據：數據可以存儲在任何地方：本地或遠程文件、數據庫、HTML TABLE，甚至在 Web 瀏覽器中以編程方式生成。
• 提取數據：對于電子表格文件，這涉及解析原始字節以讀取單元格數據。對于一般的 JS 數據，這涉及到重塑數據。
• 處理數據：從生成匯總統計數據到清理數據記錄，這一步是問題的核心。
• 數據包：這可能涉及制作新的電子表格或使用 XML 序列化JSON.stringify或編寫 XML 或簡單地為 UI 工具展平數據。
• 發布數據：電子表格文件可以上傳到服務器或本地寫入。數據可以在 HTML TABLE 或數據網格中呈現給用戶。

一個常見問題涉及從存儲在 HTML 表中的數據生成有效的電子表格導出。在此示例中，將抓取頁面上的 HTML TABLE，將在底部添加一行帶有報告日期的行，并在本地生成和下載新文件。XLSX.writeFile負責打包數據并嘗試本地下載：

// Acquire Data (reference to the HTML table)
var table_elt = document.getElementById("my-table-id");

// Extract Data (create a workbook object from the table)
var workbook = XLSX.utils.table_to_book(table_elt);

// Process Data (add a new row)
var ws = workbook.Sheets["Sheet1"];
XLSX.utils.sheet_add_aoa(ws, [["Created "+new Date().toISOString()]], {origin:-1});

// Package and Release Data (`writeFile` tries to write and save an XLSB file)
XLSX.writeFile(workbook, "Report.xlsb");

read該庫嘗試使用從電子表格文件 ( / ) 中提取有用數據并從數據 ( / )readFile生成新電子表格文件的功能來簡化步驟 2 和 4 。其他實用功能，例如 與其他常見數據源（如 HTML 表）一起使用。writewriteFiletable_to_book本文檔和各種演示項目涵蓋了步驟 1 和 5 的許多常見場景和方法。

獲取和提取數據

解析工作簿

從電子表格字節中提取數據

var workbook = XLSX.read(data, opts);

該方法可以從存儲在 JS 字符串、“二進制字符串”、NodeJS 緩沖區或類型化數組（或）read中的電子表格字節中提取數據。Uint8ArrayArrayBuffer

從本地文件讀取電子表格字節并提取數據

var workbook = XLSX.readFile(filename, opts);

該readFile方法嘗試在提供的路徑中讀取電子表格文件。瀏覽器一般不允許以這種方式讀取文件（這被認為存在安全風險），嘗試以這種方式讀取文件會拋出錯誤。

例子

NodeJS 服務器中的本地文件

readFilefs.readFileSync在引擎蓋下使用：

var XLSX = require("xlsx");

var workbook = XLSX.readFile("test.xlsx");

對于節點 ESM，readFile未啟用幫助程序。相反，fs.readFileSync 應該用于讀取文件數據，以Buffer供使用XLSX.read：

import { readFileSync } from "fs";
import { read } from "xlsx/xlsx.mjs";

const buf = readFileSync("test.xlsx");
/* buf is a Buffer */
const workbook = read(buf);

網頁中用戶提交的文件

// XLSX is a global from the standalone script

async function handleDropAsync(e) {
  e.stopPropagation(); e.preventDefault();
  const f = e.dataTransfer.files[0];
  /* f is a File */
  const data = await f.arrayBuffer();
  /* data is an ArrayBuffer */
  const workbook = XLSX.read(data);

  /* DO SOMETHING WITH workbook HERE */
}
drop_dom_element.addEventListener("drop", handleDropAsync, false);

為了獲得最大的兼容性，FileReader應使用 API：

function handleDrop(e) {
  e.stopPropagation(); e.preventDefault();
  var f = e.dataTransfer.files[0];
  /* f is a File */
  var reader = new FileReader();
  reader.onload = function(e) {
    var data = e.target.result;
    /* reader.readAsArrayBuffer(file) -> data will be an ArrayBuffer */
    var workbook = XLSX.read(data);

    /* DO SOMETHING WITH workbook HERE */
  };
  reader.readAsArrayBuffer(f);
}
drop_dom_element.addEventListener("drop", handleDrop, false);

簡單下載示例

/**
 * JSON轉換Excel
 */
function jsonToSheet () {
    let json = [
        {
            "姓名": "EJ",
            "性別": "男",
        },
        {
            "姓名": "LSQ",
            "性別": "女",
        }
    ]

    // 實例化一個工作簿
    let book = XLSX.utils.book_new()

    // 實例化一個Sheet
    let sheet = XLSX.utils.json_to_sheet(json, {
        header: ['姓名', '性別']
    })

    // 將Sheet寫入工作簿
    XLSX.utils.book_append_sheet(book, sheet, 'Sheet1')

    // 寫入文件，直接觸發瀏覽器的下載
    XLSX.writeFile(book, 'jsonToSheet.xlsx')
}

/**
 * 數組轉換Excel
 */
function arrayToSheet () {
    let data = [
        ['姓名', '性別'],
        ['EJ', '男'],
        ['LSQ', '女']
    ]

    // 實例化一個工作簿
    let book = XLSX.utils.book_new()

    // 實例化一個Sheet
    let sheet = XLSX.utils.aoa_to_sheet(data)

    // 將Sheet寫入工作簿
    XLSX.utils.book_append_sheet(book, sheet, 'Sheet1')

    // 寫入文件，直接觸發瀏覽器的下載
    XLSX.writeFile(book, 'arrayToSheet.xlsx')
}

—END—

開源協議：Apache-2.0 License

開源地址：https://github.com/SheetJS/sheetjs