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

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

文件格式

支持文件格式

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

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

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)

兼容性

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

入门

安装

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

<!-- 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 文件JavaScript前端电子表格处理神器 SheetJS

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

导出

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

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

导出流程图

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

导出文件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>

导出结果

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

导入

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

导入流程图

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

导出文件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>

导入读取结果

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


原文始发于微信公众号(开源技术小栈):JavaScript前端电子表格处理神器 SheetJS

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/247875.html

(0)
李, 若俞的头像李, 若俞

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!