最近在写一个人力资源管理系统,主要目的是将本地的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
- t:表示内容类型,
s
表示string类型,n
表示number类型,b
表示boolean类型,d
表示date类型,等等 - v:表示原始值;
- f:表示公式,如
A2+A3
; - h:HTML内容
- w:格式化后的内容
- r:富文本内容
rich text
4°!ref
确定excel的范围
5°!merges
确定单元格合并
参考文章:https://www.cnblogs.com/liuxianan/p/js-excel.html