前面对 SheetJS 有了一个简单认识，下面将通过一个简单示例来快速敲开 SheetJS 的大门。
该示例演示如何将 HTML 表格（table 标签）导出为 Excel XLSX 格式，详细步骤如下：
1、确保你的表格有一个ID：
<table id="TableToExport" border="1">
<tr>
<th colspan="3">SheetJS Table Export</th>
</tr>
<tr>
<td>Author</td>
<td>ID</td>
<td>你好!</td>
</tr>
<tr>
<td>SheetJS</td>
<td>7262</td>
<td>வணக்கம்!</td>
</tr>
<tr>
<td colspan="3">Powered by SheetJS</td>
</tr>
</table>2、在你的页面中包含对 SheetJS 库的引用：
<script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>注意：为了访问速度，将该 JS 存放到自己的资源库中，访问如下：
<script src="https://www.hxstrive.com/cdn/libs/SheetJS/0.20.3/xlsx.full.min.js"></script>3、添加一个按钮，用户点击该按钮即可生成导出文件：
<button id="sheetjsexport"><b>Export as XLSX</b></button>4、 为点击事件添加一个事件处理器，以将表格数据导出为XLSX格式：
<script>
document.getElementById("sheetjsexport").addEventListener('click', function() {
/* 从HTML DOM表格创建工作表 */
var wb = XLSX.utils.table_to_book(document.getElementById("TableToExport"));
/* 导出到文件（开始下载） */
XLSX.writeFile(wb, "SheetJSTable.xlsx");
});
</script>完整示例
下面是示例的完整代码，点击 “试一试” 可以在线预览：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SheetJS 教程</title>
<!-- 引入 SheetJS 库 -->
<script src="https://www.hxstrive.com/cdn/libs/SheetJS/0.20.3/xlsx.full.min.js"></script>
</head>
<body>
<!-- 创建一个表格 -->
<table id="TableToExport" border="1">
<tr>
<th colspan="3">SheetJS Table Export</th>
</tr>
<tr>
<td>Author</td>
<td>ID</td>
<td>你好!</td>
</tr>
<tr>
<td>SheetJS</td>
<td>7262</td>
<td>வணக்கம்!</td>
</tr>
<tr>
<td colspan="3">Powered by SheetJS</td>
</tr>
</table>
<!-- 添加一个按钮，触发导出 -->
<p>
<button type="button" id="sheetjsexport"><b>Export as XLSX</b></button>
</p>
<!-- 编写JS脚本，实现导出功能 -->
<script>
document.getElementById("sheetjsexport").addEventListener('click', function() {
/* 从HTML DOM表格创建工作表 */
var wb = XLSX.utils.table_to_book(document.getElementById("TableToExport"));
/* 导出到文件（开始下载） */
XLSX.writeFile(wb, "SheetJSTable.xlsx");
});
</script>
</body>
</html>Apple Numbers（常称 Numbers 表格）是苹果公司 iWork 办公套件的核心组件，以画布式排版、跨设备协作与直观数据处理为特色，原生适配 macOS、iOS、iPadOS，内置数百种函数与模板，适合个人 / 团队创建报表、预算表、数据分析表等，可与 Excel 格式互转，广泛用于数据管理与可视化场景。
详细步骤如下：
1、为表格创建一个容器 DIV：
<div id="TableContainer"></div>2、在你的页面中包含对 SheetJS 库的引用：
<script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>3、添加一个脚本块来下载并更新页面：
<script>
(async() => {
/* 替换为文件的URL */
const URL_TO_DOWNLOAD = "https://docs.sheetjs.com/pres.numbers";
const ab = await (await fetch(URL_TO_DOWNLOAD)).arrayBuffer();
/* 解析文件并获取第一个工作表 */
const wb = XLSX.read(ab);
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
/* 生成 HTML */
var output = document.getElementById("TableContainer");
output.innerHTML = XLSX.utils.sheet_to_html(ws);
})();
</script>注意：格式 .numbers 是苹果 iWork 套件中 Numbers 应用的原生文件格式，本质是包含 XML 数据与资源的 ZIP 归档包，用于存储表格数据、公式、图表、样式等内容
完整示例
下面是示例的完整代码，点击 “试一试” 可以在线预览：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SheetJS 教程</title>
<!-- 引入 SheetJS 库 -->
<script src="https://www.hxstrive.com/cdn/libs/SheetJS/0.20.3/xlsx.full.min.js"></script>
</head>
<body>
<!-- 创建一个表格 -->
<div id="TableContainer"></div>
<!-- 编写JS脚本，实现导出功能 -->
<script>
(async() => {
/* 替换为文件的URL */
const URL_TO_DOWNLOAD = "https://www.hxstrive.com/cdn/resources/sheetjs/sheetjs_pres.numbers";
const ab = await (await fetch(URL_TO_DOWNLOAD)).arrayBuffer();
/* 解析文件并获取第一个工作表 */
const wb = XLSX.read(ab);
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
/* 生成 HTML */
var output = document.getElementById("TableContainer");
output.innerHTML = XLSX.utils.sheet_to_html(ws);
})();
</script>
</body>
</html>此示例从一个 CSV 字符串开始。使用“文件输入”元素选择要加载的工作簿。使用“导出XLSX”按钮将表格写入XLSX。
完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SheetJS 教程</title>
<!-- 引入 SheetJS 库 -->
<script src="https://www.hxstrive.com/cdn/libs/SheetJS/0.20.3/xlsx.full.min.js"></script>
<!-- 样式美化（和之前保持一致） -->
<style>
body { padding: 20px; font-family: Arial, sans-serif; }
.container { max-width: 800px; margin: 0 auto; }
button { margin-left: 10px; padding: 6px 12px; cursor: pointer; }
input[type="file"] { margin-bottom: 10px; }
#tabeller { margin-top: 20px; border-collapse: collapse; width: 100%; }
#tabeller th, #tabeller td { border: 1px solid #ddd; padding: 8px; text-align: left; }
#tabeller th { background-color: #f2f2f2; }
#table-preview { margin-top: 20px; }
</style>
</head>
<body>
<div class="container">
<!-- 导入文件按钮 -->
<input type="file" id="file-input" accept=".xlsx,.xls,.csv" />
<!-- 导出按钮 -->
<button id="export-btn"><b>Export XLSX!</b></button>
<!-- 表格预览区域 -->
<div id="table-preview"></div>
</div>
<script>
/**
* 渲染表格到页面
* @param {Object} worksheet - SheetJS工作表对象
*/
function renderTable(worksheet) {
// 生成HTML表格字符串
const tableHtml = XLSX.utils.sheet_to_html(worksheet, { id: "tabeller" });
// 插入到预览区域
const previewContainer = document.getElementById('table-preview');
previewContainer.innerHTML = tableHtml;
// 缓存表格DOM元素，方便后续导出
tableElement = document.getElementById('tabeller');
}
/**
* 处理文件导入
*/
async function handleFileImport(e) {
// 未选择文件则返回
if (!e.target.files[0]) return;
const file = e.target.files[0];
// 读取文件为ArrayBuffer
const data = await file.arrayBuffer();
// 解析文件
const wb = XLSX.read(data);
// 取第一个工作表
const ws = wb.Sheets[wb.SheetNames[0]];
// 渲染表格
renderTable(ws);
// 清空文件选择框（可选，提升体验）
e.target.value = '';
}
/**
* 处理文件导出
*/
function handleFileExport() {
// 校验表格是否存在
if (!tableElement) {
alert("暂无表格数据可导出！");
return;
}
// 从HTML表格生成工作簿
const wb = XLSX.utils.table_to_book(tableElement);
// 导出为XLSX文件
XLSX.writeFile(wb, "SheetJSIntro.xlsx");
}
// 核心变量：存储表格DOM
let tableElement = null;
// 加载示例CSV数据
const csv = `\
This,is,a,Test
வணக்கம்,สวัสดี,你好,가지마
1,2,3,4`;
// 解析CSV为工作簿并生成表格
const wb = XLSX.read(csv, { type: "string" });
const ws = wb.Sheets.Sheet1;
renderTable(ws);
// 绑定导入文件事件
document.getElementById('file-input').addEventListener('change', handleFileImport);
// 绑定导出按钮事件
document.getElementById('export-btn').addEventListener('click', handleFileExport);
</script>
</body>
</html>参考资料 https://docs.sheetjs.com/docs/，更多知识请阅读后续章节。
川公网安备51010802032098