关于下载上传的sheetjs

一、背景

需要讲后端返回来的表格数据通过前端设置导出其中某些字段，而且得是xlsx格式的。

那就考虑使用控件SheetJS。如果是几年前，一般来说，保存excel的文件都是后端去处理，处理完成给前端一个接口，前端调用了打开就可以下载到该表格了。但是，因为PC电脑的硬件处理数据的能力越来越好，前端也具备了处理一些大数据的能力。那么处理大数据就需要把相关的情况考虑完全的控件，SheetJS就是这样的一个工具。

二、官网

API Reference | SheetJS Community Edition

三、常用的API

* XLSX.utils.aoa_to_sheet：数组转换为worksheet
* XLSX.utils.json_to_sheet：json对象转换为worksheet
* XLSX.utils.table_to_sheet：表格转换为worksheet

四、两大对象

workbook对象与worksheet对象

可以理解成，workbook对象是整个表格的内容，而worksheet可以理解成表格的数据内容。

直观点看：

fileInput.addEventListener("change", (event) => {handleFileUpload(event.target.files[0]);});
// 文件上传函数function handleFileUpload(file) {const reader = new FileReader();reader.readAsArrayBuffer(file);// 定义一个加载完成的回调，在 FileReader 完成文件读取操作后被调用。reader.onload = (event) => {const data = new Uint8Array(event.target.result);const workbook = XLSX.read(data, { type: "array" });console.log('workbook', workbook)// 获取工作表名数组const sheetNameArray = workbook.SheetNames;// 获取第一个工作表const firstSheet = workbook.Sheets[sheetNameArray[0]];// 将工作表转换为二维数组const sheetDataArray = XLSX.utils.sheet_to_json(firstSheet, {// defval: "" // 配置这个得到对象数组的格式header: 1 // 得到二维数组});// 调用渲染 Excel 的函数renderTable(sheetDataArray);};}

打印的workbook如下：

显然，多个表，它也能够把它的数据抓出来。

五、上传相关

//读取（本地或网络）文件，并创建一个工作薄
let workbook = XLSX.read(data, opts);
//创建一个新的工作簿
let workbook = XLSX.utils.book_new();
//通过抓取页面中的 HTML TABLE 创建工作表
let workbook = XLSX.utils.table_to_book(dom_element, opts);//将Array<Object>生成为sheet，其中包含基于对象键自动生成的“标题”。
//header 标题使用指定的字段顺序（默认 Object.keys）
//skipHeader 如果为true，则不会在输出中包含标题行
let worksheet = XLSX.utils.json_to_sheet(Array<Object>, {header, skipHeader: false});
//将Array<Array>生成为sheet
let worksheet = XLSX.utils.aoa_to_sheet(Array<Array>);
//接受一个表 DOM 元素并返回一个类似于输入表的工作薄	
let worksheet = XLSX.utils.table_to_sheet(DOM)//更新sheet，在对应位置进行覆盖
XLSX.utils.sheet_add_json(worksheet, Array<Object>, {header,skipHeader: true, origin: "A2"});
XLSX.utils.sheet_add_aoa(worksheet, Array<Array>, { origin: "A1" });
XLSX.utils.sheet_add_dom(worksheet, DOM, { origin: -1 });//将sheet工作表添加到该工作薄中
XLSX.utils.book_append_sheet(workbook, worksheet, "sheet名称");

伪代码（开发过程根据自己的业务进行）：

function excelImport(vv) {const eleInput = document.createElement('input');eleInput.type = 'file';eleInput.style.display = 'block';eleInput.onchange = function (e) {const file = e.target.files[0];let name = file.namelet suffix = name.substr(name.lastIndexOf("."));let reader = new FileReader()reader.onload = async (event) => {try {// 判断文件类型是否正确if (".xls" != suffix && ".xlsx" != suffix) {cb.utils.alert("选择Excel格式的文件导入!");return false;}let { result } = event.target;// 读取文件let workbook = XLSX.read(result, { type: 'binary' });let data = [];// 循环文件中的每个表let reg = /[\u4e00-\u9fa5|(|)|_$]/g;for (let sheet in workbook.Sheets) {if (workbook.Sheets.hasOwnProperty(sheet)) {let str = XLSX.utils.sheet_to_json(workbook.Sheets[sheet])sheet = sheet.replace(reg, "")// 将获取到表中的数据转化为json格式data = data.concat(str)}}let source = data.splice(3, data.length);insertExcellData(vv, source); //该方法是处理数据的详细方式，根据业务需要来处理。} catch (e) {cb.utils.alert("文件类型不正确!");}}reader.readAsBinaryString(file);document.body.removeChild(eleInput);}document.body.appendChild(eleInput);eleInput.dispatchEvent(new MouseEvent('click'))}

也可以试试直接cdn引入的方式：

<html lang="zh-CN"><head><meta charset="utf-8"></meta>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.4/xlsx.full.min.js"></script><body><!-- 用于点击上传文件的输入字段 --><input type="file" id="fileInput" style="display: none" accept=".xls,.xlsx" required /><label for="fileInput" class="label">点击上传文件</label><!-- 用于拖放文件上传的输入字段 --><div id="dropArea"><p>拖拽文件至此处</p></div><!-- 用于显示解析后的数据表 --><div id="table-container" style="margin-top: 20px"></div><script>const fileInput = document.getElementById("fileInput");const dropArea = document.getElementById("dropArea");fileInput.addEventListener("change", (event) => {handleFileUpload(event.target.files[0]);});dropArea.addEventListener("drop", (e) => {e.preventDefault();dropArea.style.border = "2px dashed #ccc";const droppedFiles = e.dataTransfer.files;handleFileUpload(droppedFiles[0]);});// 文件上传函数function handleFileUpload(file) {const reader = new FileReader();console.log('file', file)reader.readAsArrayBuffer(file);// 定义一个加载完成的回调，在 FileReader 完成文件读取操作后被调用。reader.onload = (event) => {console.log('event', event)const data = new Uint8Array(event.target.result);const workbook = XLSX.read(data, { type: "array" });console.log('workbook', workbook)// 获取工作表名数组const sheetNameArray = workbook.SheetNames;// 获取第一个工作表const firstSheet = workbook.Sheets[sheetNameArray[0]];// 将工作表转换为二维数组const sheetDataArray = XLSX.utils.sheet_to_json(firstSheet, {// defval: "" // 配置这个得到对象数组的格式header: 1 // 得到二维数组});// 调用渲染 Excel 的函数renderTable(sheetDataArray);};}// 将数据渲染为一个表格function renderTable(sheetDataArray) {const table = document.createElement("table");table.classList.add("table", "table-striped");sheetDataArray.forEach((row) => {const tableRow = document.createElement("tr");row.forEach((cell) => {const tableCell = document.createElement("td");tableCell.textContent = cell;tableRow.appendChild(tableCell);});table.appendChild(tableRow);});// 添加数据表到表格容器const tableContainer = document.getElementById("table-container");tableContainer.innerHTML = "";tableContainer.appendChild(table);}// 为拖放添加事件监听器dropArea.addEventListener("dragover", (e) => {e.preventDefault();dropArea.style.border = "2px dashed #333";});dropArea.addEventListener("dragleave", () => {dropArea.style.border = "2px dashed #ccc";});</script>
</body></html>

六、下载相关

最重要的代码片段如下：

//数据let sheet=XLSX.utils.json_to_sheet(arr),book=XLSX.utils.book_new();XLSX.utils.book_append_sheet(book,sheet,"sheet1");// user开头加时间戳的文件名，可以修改成其它名字XLSX.writeFile(book,`列表.xls`);

伪代码如下：

<div onclick="clickfn()">点击这里</div>
function clickfn() {let arr = [{'序号': 1,'名字': '张三','员工号码': '789'}]let sheet=XLSX.utils.json_to_sheet(arr), //arr 数据需要业务上给与book=XLSX.utils.book_new();XLSX.utils.book_append_sheet(book,sheet,"sheet1");// user开头加时间戳的文件名，可以修改成其它名字XLSX.writeFile(book,`列表.xls`);}