vue读取本地xlsx文件

最近项目中有一个需求，大概就是先上传文件，再将上传文件详情回传到页面显示出来，但是由于表头太多，一个一个对字段显得太繁琐了，所以就找了一个可以直接读取Excel文件的方法。但通过实践后，还是发现调接口来的比较方便，不过无妨，也可以当作学了一种方法了。
在网上搜索发现了一个可以直接用的工具库 js-xlsx

js-xlsx

由 SheetJS 出品的 js-xlsx 是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。

官方github : https://github.com/SheetJS/js-xlsx

下面就开始我们的示例：
1、安装npm 包 xlsx

npm install xlsx

创建一个页面 readExcel.vue 用于编写此例子

<template><div><input type="file" ref="upload" accept=".xls,.xlsx" ></div>
</template>

知识点：读取excel

读取 excel 主要是通过 XLSX.read(data,{type:type}) 来实现的，返回一个workbook对象，其中 type 的值有

base64 ：以base64 方式读取；
binary ：BinaryString格式(byte n is data.charCodeAt(n))
string ：UTF8编码的字符串
buffer ：nodejs Buffer
array ：Uint8Array，8位无符号数组；
file ：文件的路径（仅nodejs下支持）；

JS代码

<script>
// import XLSX from 'xlsx'   // 前提是npm xlsx
export default {methods: {readExcel(e) {//表格导入// 引入工具库 import 也可以，前提是已经npm 下来了。var XLSX = require("xlsx");const files = e.target.files;var vali=/\.(xls|xlsx)$/;if(files.length<=0){//如果没有文件名return false;}else if(!vali.test(files[0].name.toLowerCase())){this.$Message.error('上传格式不正确，请上传xls或者xlsx格式');return false;}const fileReader = new FileReader();fileReader.onload = (e) => {try {const data = e.target.result; // data则是我们在excel表中获取的数据const Workbook = XLSX.read(data, { type: 'binary'}); // 通过XLSX读取出来得到了一个 workdata 对象，下面详细介绍 workdata 对象中有些什么this.$refs.upload.value = ''; // 处理完成 清空表单值} catch (e) {return false;}};fileReader.readAsBinaryString(files[0]);}},mounted(){this.$refs.upload.addEventListener('change', e => {//绑定监听表格导入事件this.readExcel(e);})}
}
</script>

Workbook Object 里面有些什么东西呢？

我们先来打印出来看看：

我们主要看看 SheetName 和 Sheets中的结果
可以发现，SheetName 里面保存的是所有 sheet 的名字，然后 Sheets 保存了每个sheet 中的内容（称为 Sheet Object ），每个 sheet 是通过类型A1 这种键值来保存每个单元格的内容（称为单元格对象 Cell object）

Sheet Object

sheet[ ’ !ref ’ ] : 表示所有单元格的范围，例如这里是A1:D3,就表示A1到D3；
sheet[ !merges] : 存放一些单元格合并信息，为一个数组，每个数组由包含s和e构成的对象组成，s表示开始，e表示结束，r表示行，c表示列；

Cell Object

每一个单元格为一个对象，主要有 t、v、r、h、w等字段；

t ：表示内容类型，s表示string类型，n表示number类型，b表示boolean类型，d表示date类型，等等
v : 表示原始值；
f ：表示公式，如 B2+ B3;
h ：html内容
r : 富文本内容

在上述我们已经拿到了 Workbook 对象，但是肯定这样是还远远不够的撒，对于这种对象还需要处理成自己想要的数据格式才行

let sheetNames = Workbook.SheetNames ;//获取需要数据的表名
let workSheet = Workbook.Sheets[sheetNames]; //workSheet 是该excel表格中的数据

到这一步，大家可能会觉得应该使用遍历来获取数据，确实如此，但是翻阅工具库xlsx 发现提供了便捷方法供我们使用,XLSX.utils ，这里面有很多种格式，我们介绍几种常用的；

XLSX.utils.sheet_to_csv：生成CSV格式
XLSX.utils.sheet_to_txt：生成纯文本格式
XLSX.utils.sheet_to_html：生成HTML格式
XLSX.utils.sheet_to_json：输出JSON格式

到这里使用XLSX.utils 后就能生成我们想要的数据了。