vue js xlsx 读取本地 excel

最近在写一个人力资源管理系统，主要目的是将本地的excel文件读取解析，将有效数据传到后台。

下文介绍流程，文末附有参考文章。

1、安装npm包xlsx

yarn add xlsx

2、结合上传组件和自己写的读取方法readXLSX，可以进行本地excel读取。
我使用的语言是vue，代码如下：

<template><div><Upload action="" :before-upload="beforeUpload"><Button icon="ios-cloud-upload-outline">上传Excel文件</Button></Upload></div>
</template>

<script>
import XLSX from 'xlsx'
function readXLSX (file) {let nameSplit = file.name.split('.')let format = nameSplit[nameSplit.length - 1]if (!['xlsx', 'csv'].includes(format)) {return false}return new Promise((resolve, reject) => {let reader = new FileReader()reader.readAsBinaryString(file)reader.onload = function (evt) {let data = evt.target.result // 读到的数据var workbook = XLSX.read(data, { type: 'binary' })resolve(workbook)}})
}
export default {methods: {async beforeUpload (file) {const workbook = await readXLSX(file)console.log(workbook)return false}}
}
</script>

3、其实问题的难点不在于读取，而在于需要理解workbook中对象的含义。

下面结合具体实例进行分析。

我需要读取的excel文件如下

console.log(workbook)打印出内容如下

1° SheetNames保存了所有的sheet名字
Sheets保存具体内容
2° 每一个sheet是通过类似A1这样的键值保存每个单元格的内容。称为单元格对象（Cell Object）
3° 每一个单元格是一个对象（Cell Object），主要有t、v、r、h、w等字段。
详情官方文档 https://github.com/SheetJS/js-xlsx#cell-object