JavaScript前端电子表格处理神器 SheetJS

Tinywan

发布于 2024-01-02 16:47:17

2.3K00

代码可运行

运行总次数：0

代码可运行

SheetJS 是一个基于 JavaScript 的表格处理库，它支持各种表格文件格式，包括 Excel、CSV 等。SheetJS 适用于浏览器和 Node.js，拥有强大的电子表格解析功能，即使电子表格很大，也可以轻松处理。此外，SheetJS 支持大量的电子表格格式，如 OpenDocument 等。

文件格式

支持文件格式

读和写入许多电子表格文件格式

Format	Read	Write
Excel Worksheet/Workbook Formats	:-----:	:-----:
Excel 2007+ XML Formats (XLSX/XLSM)	✔	✔
Excel 2007+ Binary Format (XLSB BIFF12)	✔	✔
Excel 2003-2004 XML Format (XML "SpreadsheetML")	✔	✔
Excel 97-2004 (XLS BIFF8)	✔	✔
Excel 5.0/95 (XLS BIFF5)	✔	✔
Excel 4.0 (XLS/XLW BIFF4)	✔	✔
Excel 3.0 (XLS BIFF3)	✔	✔
Excel 2.0/2.1 / Multiplan 4.x DOS (XLS BIFF2)	✔	✔
Excel Supported Text Formats	:-----:	:-----:
Delimiter-Separated Values (CSV/TXT)	✔	✔
Data Interchange Format (DIF)	✔	✔
Symbolic Link (SYLK/SLK)	✔	✔
Lotus Formatted Text (PRN)	✔	✔
UTF-16 Unicode Text (TXT)	✔	✔
Other Workbook/Worksheet Formats	:-----:	:-----:
Numbers 3.0+ / iWork 2013+ Spreadsheet (NUMBERS)	✔	✔
WPS 电子表格 (ET)	✔
OpenDocument Spreadsheet (ODS)	✔	✔
Flat XML ODF Spreadsheet (FODS)	✔	✔
Uniform Office Format Spreadsheet (标文通 UOS1/UOS2)	✔
dBASE II/III/IV / Visual FoxPro (DBF)	✔	✔
Lotus 1-2-3 (WK1/WK3)	✔	✔
Lotus 1-2-3 (WKS/WK2/WK4/123)	✔
Quattro Pro Spreadsheet (WQ1/WQ2/WB1/WB2/WB3/QPW)	✔
Works 1.x-3.x DOS / 2.x-5.x Windows Spreadsheet (WKS)	✔
Works 6.x-9.x Spreadsheet (XLR)	✔
Other Common Spreadsheet Output Formats	:-----:	:-----:
HTML Tables	✔	✔
Rich Text Format tables (RTF)	✔	✔
Ethercalc Record Format (ETH)	✔	✔

兼容性

入门

安装

这里使用浏览器脚本安装，

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

或者下载添加到带有<script>标签的页面：

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

测试将表数据导出到XLSX

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>开源技术小栈文档SheetJSTable</title>
    <script src="./xlsx.full.min.js"></script>
</head>
<body>
<table id="TableToExport"></table>
<button id="sheetjsexport"><b>Export as XLSX</b></button>
<script>
    document.getElementById("sheetjsexport").addEventListener('click', function() {
        /* Create worksheet from HTML DOM TABLE */
        const wb = XLSX.utils.table_to_book(document.getElementById("TableToExport"));
        /* Export to file (start a download) */
        XLSX.writeFile(wb, "SheetJSTable.xlsx");
    });
</script>
</body>
</html>

打开浏览器运行页面，会导出一个空白的SheetJSIntro.xlsx 文件

导出

许多现代数据源都提供了API来下载JSON格式的数据。许多用户更喜欢使用电子表格软件。SheetJS库通过将程序员友好的JSON转换为用户友好的工作簿来帮助弥合差距。

本例的目标是有了一个简单的姓名和年龄列表，我们将使用SheetJS API函数来构建一个工作簿对象并导出到XLSX。

导出流程图

导出文件ExportSheetJS.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>开源技术小栈</title>
    <script src="./xlsx.full.min.js"></script>
</head>
<body>
<table id="TableToExport"></table>
<button id="sheetjsexport"><b>Export as XLSX</b></button>
<script>
    document.getElementById("sheetjsexport").addEventListener('click', function () {
        /** 导出数据 */
        let json = [
            {
                "姓名": "开源技术小栈",
                "年龄": 1,
            },
            {
                "姓名": "Tinywan",
                "年龄": 24,
            },
            {
                "姓名": "阿克苏",
                "年龄": 26,
            }
        ]
        /** 实例化一个工作簿 */
        let book = XLSX.utils.book_new();

        /** 实例化一个Sheet */
        let sheet = XLSX.utils.json_to_sheet(json, {
            header: ['姓名', '年龄']
        })

        /** 将Sheet写入Sheet 工作簿 */
        XLSX.utils.book_append_sheet(book, sheet, 'Sheet1')

        /** 写入文件，直接触发浏览器的下载 */
        XLSX.writeFile(book, 'SheetJS数据导出.xlsx')
    });
</script>
</body>
</html>

导出结果

导入

此示例的目标是处理XLS工作表中的联邦学生资助组合数据。我们将从美国教育部下载并解析一个工作簿。解析完原始数据后，我们将提取未偿还美元总额并将数据显示在一个表中。

导入流程图

导出文件ImportSheetJS.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>开源技术小栈ImportSheetJS</title>
</head>
<body>
<table>
    <thead><tr><th>Fiscal Year</th><th>Quarter</th><th>Total (in $B)</th></tr></thead>
    <tbody id="tbody"></tbody>
</table>
<script src="./xlsx.full.min.js"></script>
<script>
    (async() => {
        /* parse workbook */
        const url = "https://sheetjs.com/data/PortfolioSummary.xls";
        const workbook = XLSX.read(await (await fetch(url)).arrayBuffer());

        /* get first worksheet */
        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const raw_data = XLSX.utils.sheet_to_json(worksheet, {header:1});

        /* fill years */
        let last_year = 0;
        raw_data.forEach(r => last_year = r[0] = (r[0] != null ? r[0] : last_year));

        /* select data rows */
        const rows = raw_data.filter(r => r[0] >= 2007 && r[0] <= 2023);

        /* generate row objects */
        const objects = rows.map(r => ({FY: r[0], FQ: r[1], total: r[8]}));

        /* add rows to table body */
        objects.forEach(o => {
            const row = document.createElement("TR");
            row.innerHTML = `<td>${o.FY}</td><td>${o.FQ||""}</td><td>${o.total}</td>`;
            tbody.appendChild(row);
        });
    })();
</script>
</body>
</html>