SheetJS，一款小巧的 JavaScript 表格库

嗨，大家好，欢迎来到猿镇，我是镇长，lee。

又到了和大家见面的时间，今天分享一款处理表格的 JavaScript 库 —— SheetJS。在日常开发中，会遇到处理表格数据的任务，借助 SheetJS 的能力，可以轻松实现表格的处理工作。无需深厚的编程知识，即可利用 SheetJS 轻松实现数据的导入、导出、编辑等操作，使得表格操作变得愈发轻松。

https://github.com/SheetJS/sheetjs

1. SheetJS简介

SheetJS 是一个纯粹基于 JavaScript 的表格处理库，它支持各种表格文件格式，包括Excel、CSV等。该库提供了丰富的API，能够在不需要服务器端支持的情况下，直接在浏览器中进行表格数据的操作。

2. 安装与基础用法

安装方式

CDN

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

包管理

 # npm
npm i --save https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz
 
#yarn
pnpm install https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz
 
#pnpm
yarn add https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz复制

基础用法

使用 SheetJS 非常简单。你只需在 HTML 文件中引入相关的 JavaScript 文件，就能够立即开始使用。下面是一个基本的例子：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SheetJS入门</title>
</head>
<body>
    <input type="file" id="fileInput" />
    <script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>
    <script>
        document.getElementById('fileInput').addEventListener('change', handleFile);
        
        function handleFile(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    const data = new Uint8Array(e.target.result);
                    const workbook = XLSX.read(data, { type: 'array' });
                    // 在这里可以处理读取到的表格数据
                    console.log(workbook);
                };
                reader.readAsArrayBuffer(file);
            }
        }
    </script>
</body>
</html>复制

这个例子展示了如何通过SheetJS读取本地文件中的表格数据。你只需监听文件选择事件，读取文件，然后通过SheetJS提供的XLSX.read方法解析数据。

3. 导出表格文件

SheetJS 同样支持将数据导出为 Excel 或其他格式。以下是一个简单的例子：

 const data = [
  ['姓名', '年龄', '城市'],
  ['张三', 25, '上海'],
  ['李四', 30, '北京'],
]
 
// 将二维数组转换为工作表对象
const ws = XLSX.utils.aoa_to_sheet(data)
// 创建一个新的工作簿对象
const wb = XLSX.utils.book_new()
// 将工作表对象添加到工作簿中，'Sheet1'为工作表的名称
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
// 将工作簿数据写入文件，'exported_data.xlsx'为导出文件的名称
XLSX.writeFile(wb, 'export.xlsx')复制

在这个例子中，我们创建了一个包含表格数据的数组，然后使用 SheetJS 提供的工具方法将数据转换成工作表对象。最后，通过XLSX.writeFile 方法将工作簿写入一个文件。

4. 高级用法

创建工作表的方式

SheetJS 提供了多种方式来创建工作表（Worksheet）：

通过数组创建工作表 (aoa_to_sheet)：

使用 XLSX.utils.aoa_to_sheet 方法，你可以通过一个二维数组来创建工作表。每个子数组表示一行数据。

 const data = [
    ['Name', 'Age', 'Country'],
    ['John Doe', 25, 'USA'],
    ['Jane Doe', 30, 'Canada']
];
 
const ws = XLSX.utils.aoa_to_sheet(data);复制

通过JSON对象创建工作表 (json_to_sheet)：

使用 XLSX.utils.json_to_sheet 方法，你可以通过一个包含对象的数组来创建工作表。每个对象的属性表示一列数据，数组中的每个对象表示一行数据。

 const data = [
    { Name: 'John Doe', Age: 25, Country: 'USA' },
    { Name: 'Jane Doe', Age: 30, Country: 'Canada' }
];
 
const ws = XLSX.utils.json_to_sheet(data);复制

通过数据范围创建工作表 (table_to_sheet)：

使用 XLSX.utils.table_to_sheet 方法，你可以从一个HTML表格元素中创建工作表。

 const tableElement = document.getElementById('myTable');
const ws = XLSX.utils.table_to_sheet(tableElement);复制

通过CSV字符串创建工作表 (csv_to_sheet)：

使用 XLSX.utils.csv_to_sheet 方法，你可以从一个CSV格式的字符串中创建工作表。

 const csvString = 'Name,Age,Country\nJohn Doe,25,USA\nJane Doe,30,Canada';
const ws = XLSX.utils.csv_to_sheet(csvString);复制

工作表输出

SheetJS（XLSX）提供了丰富的方法，可以将工作表（Worksheet）转换为多种格式。以下是一些常见的工作表转换格式：

导出为Excel文件 (writeFile):

使用 XLSX.writeFile 方法，你可以将工作表保存为一个 Excel 文件，以指定的文件名下载。

 const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, 'exported_data.xlsx');复制

导出为二进制数据 (write):

使用 XLSX.write 方法，你可以将工作表保存为二进制数据，可以进一步处理或上传到服务器。

 const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });复制

导出为CSV字符串 (utils.sheet_to_csv):

使用 XLSX.utils.sheet_to_csv 方法，你可以将工作表保存为CSV格式的字符串。

 const csvString = XLSX.utils.sheet_to_csv(ws);复制

导出为HTML表格 (utils.sheet_to_html):

使用 XLSX.utils.sheet_to_html 方法，你可以将工作表保存为HTML格式的表格。

 const htmlTable = XLSX.utils.sheet_to_html(ws);复制

这些方法提供了不同的输出格式，使得你可以根据需求选择合适的格式。无论是保存为Excel 文件、二进制数据、数据链接，还是转换为 CSV 字符串或 HTML 表格，SheetJS 都提供了便捷的方法。

5. 总结

SheetJS 是一个功能强大且易于使用的 JavaScript 表格库，适用于各种表格处理场景。本文只是简单介绍了它的一部分功能，希望能够为你提供一个入门指南。

今天的分享就到这里，如果觉得对你有帮助，感谢点赞、分享、关注一波，你的认可是我创造的最大动力。

更多内容请关注公众号：猿镇，一个分享有趣前端知识的公众号。

历史文章

• Swiper，一款超赞的 JavaScript 滑动库？
• Vanta.js，让你的网页焕发3D魔力的JavaScript库
• Lodash.js，一款超赞的 JavaScript 实用工具库？
• medium-zoom，一款丝滑的 JavaScript 图片缩放库
• Anime.js，一款神奇的 JavaScript 动画库

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

	# npm
	npm i --save https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz

	#yarn
	pnpm install https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz

	#pnpm
	yarn add https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>SheetJS入门</title>
	</head>
	<body>
	<input type="file" id="fileInput" />
	<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>
	<script>
	document.getElementById('fileInput').addEventListener('change', handleFile);

	function handleFile(event) {
	const file = event.target.files[0];
	if (file) {
	const reader = new FileReader();
	reader.onload = function (e) {
	const data = new Uint8Array(e.target.result);
	const workbook = XLSX.read(data, { type: 'array' });
	// 在这里可以处理读取到的表格数据
	console.log(workbook);
	};
	reader.readAsArrayBuffer(file);
	}
	}
	</script>
	</body>
	</html>

	const data = [
	['姓名', '年龄', '城市'],
	['张三', 25, '上海'],
	['李四', 30, '北京'],
	]

	// 将二维数组转换为工作表对象
	const ws = XLSX.utils.aoa_to_sheet(data)
	// 创建一个新的工作簿对象
	const wb = XLSX.utils.book_new()
	// 将工作表对象添加到工作簿中，'Sheet1'为工作表的名称
	XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
	// 将工作簿数据写入文件，'exported_data.xlsx'为导出文件的名称
	XLSX.writeFile(wb, 'export.xlsx')

	const data = [
	['Name', 'Age', 'Country'],
	['John Doe', 25, 'USA'],
	['Jane Doe', 30, 'Canada']
	];

	const ws = XLSX.utils.aoa_to_sheet(data);

	const data = [
	{ Name: 'John Doe', Age: 25, Country: 'USA' },
	{ Name: 'Jane Doe', Age: 30, Country: 'Canada' }
	];

	const ws = XLSX.utils.json_to_sheet(data);

	const tableElement = document.getElementById('myTable');
	const ws = XLSX.utils.table_to_sheet(tableElement);

	const csvString = 'Name,Age,Country\nJohn Doe,25,USA\nJane Doe,30,Canada';
	const ws = XLSX.utils.csv_to_sheet(csvString);

	const wb = XLSX.utils.book_new();
	XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
	XLSX.writeFile(wb, 'exported_data.xlsx');