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

• 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