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>
导入读取结果
原文始发于微信公众号(开源技术小栈):JavaScript前端电子表格处理神器 SheetJS
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/247875.html