Excel 导入导出（前端处理：xslx）（后端处理：hutool+poi || Easy Excel ）

原创

已于 2024-01-16 18:34:52 修改 · 2.8k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#状态模式

于 2024-01-16 18:33:03 首次发布

Excel 导入导出（前端处理：xslx）

预览（vue-office/excel"……；docx-preview）

Excel 导入导出(后端处理：hutool+poi || Easy Excel )

前端

后端使用Hutool处理Excel 文件

Hutool-poi是针对Apache POI的封装，因此需要用户自行引入POI库

导入

如何给导出的excel表头设置中文？

list里的对象有键值对，键为表头，值为表头下的内容

一、Excel 导入导出（前端处理：xslx）

调用文件对象的 arrayBuffer 方法读取文件，然后使用 xslx.read 方法解析数为 Excel 工作簿对象
readAsBinaryString 和 readAsArrayBuffer 是 FileReader 对象的两种不同读取文件的方式：

创建 FileReader 对象。使用FileReader 对象的读取文件方法： readAsBinaryString ，将文件读取为二进制字符串；或使用 readAsArrayBuffer 方法会将文件读取为二进制数据缓冲区，即ArrayBuffer对象。

再使用 xslx.read 方法解析数据为 Excel 工作簿对象

3.下图为Excel 工作簿对象实例：

代码示例

导入Excel数据

const reader = new FileReader()
reader.readAsBinaryString(file)
reader.onload = function (e) { 
    const data = e.target.result
    let wb = XLSX.read(data, {//Excel 工作簿对象，打印如上
        type: 'binary'
    })
}


const reader = new FileReader()
reader.readAsArrayBuffer(file)
reader.onload = function (e) {
    const data = e.target.result
    let wb = XLSX.read(data, {
        type: 'array'
    })
}

创建 FileReader 对象。

使用FileReader 对象的读取文件方法： readAsBinaryString ，将文件读取为二进制字符串。

（使用 readAsArrayBuffer 方法会将文件读取为二进制数据缓冲区，即ArrayBuffer对象）

设置 onload 回调函数，该函数在文件读取成功后触发。

在回调函数中，通过 e.target.result 获取读取文件成功的结果值，即文件的二进制数据。

使用 XLSX.read 方法解析二进制字符串或ArrayBuffer对象为 Excel 工作簿对象

（type: 'binary' 表示解析的数据类型是二进制字符串；type: 'array'表解析的数据类型是ArrayBuffer对象）

如果提供了回调函数 callback，则调用该函数，并将解析得到的 workbook 对象传递给回调函数。

这个流程适用于在前端处理 Excel 文件，你可以在回调函数中进一步处理 workbook 对象，比如获取工作表、将工作表转换为 JSON 等。

/*

readAsBinaryString 和 readAsArrayBuffer 是 FileReader 对象的两种不同读取文件的方式。

readAsBinaryString 方法是过时的

官方推荐使用 readAsArrayBuffer 方法

*/

<input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">

let _file = e.target.files[0];//获取input标签里的文件

_file.arrayBuffer().then((res) => {
    const wb = XLSX.read(res);
});

使用 arrayBuffer 方法，更符合现代 JavaScript 异步风格

获取input标签里的文件

调用文件对象的 arrayBuffer 方法，该方法返回一个 Promise，该 Promise 在文件数据准备好时解析。

在 then 方法中，获取解析后的二进制数据 res。