前端调用后端接口导入Excel

需求：前端需要增加一个导入按钮，导入既定的Excel模板数据，
后端接口请求方法：post
参数格式：Form Data

const param = {
	name: 'zhangsan'，
	code: '001',
	id: 'A001',
	file: excelData // 后端需要的二进制流
}

分析：既然是Excel的导入或者导出首先我们就要安装 excel 的插件 xlsx

1. 首先全局安装xlsx插件

npm install xlsx --save

2. 前端代码：我们还是使用 element-ui 的 el-upload 组件，不过这个组件过于复杂和详细，它考虑的场景比较多，但是我们要删繁就简，只获取我们需要的东西即可。

<!--
1.action 必选参数，上传的地址，这里我们调用后端接口，所以不提供地址，但是得给不然会报错
2.show-file-list 这里不显示上传的文件列表，所以：:show-file-list='false' 指定为false
3.accept 接受上传的文件类型 这里我指定为：.xlsx, .xls
4.on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
5.auto-upload 是否在选取文件后立即进行上传,我们需要调接口，所以，指定为false
6.on-exceed	文件超出个数限制时的钩子 可限制文件的大小
-->
<el-upload
   ref="upload"
   action
   accept=".xlsx, .xls"
   :show-file-list='false'
   :on-change="handleUpLoad"
   :auto-upload="false">
   <el-button slot="trigger" type="primary">导入Excel文件</el-button>
 </el-upload>

import readFile from '@/utils/index' // 从工具函数中导入文件处理函数，注意此时readFile相当于一个对象

// 导入Excel
async handleUpLoad (ev) {
  let file = ev.raw
  if (!file) return
  const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
  const fileType = ['xlsx', 'xls'].some(item => item === extension)
  if (!fileType) {
    this.$message('格式错误！请选择后缀是.xlsx, .xls 的文件')
    return
  }
  let data = await readFile.readFile(file) // 这个数据就是后端需要的二进制数据流，传给后端即可
  this.importExcelData(data) // 这里调用后端接口并传参
}

// 解析Excel数据为二进制数据流， 写入工具函数utils.js 中方便其他模块使用
const readFile = file => {
  return new Promise(resolve => {
    let reader = new FileReader()
    reader.readAsBinaryString(file)
    reader.onload = ev => {
      resolve(ev.target.result)
    }
  })
}

// 导入
async importExcelData (importData) {
  const param = {
    name: '张三',
    code: '123',
    id: '111',
    file: importData
  }
  let res = await api.importData(param)
  if (res.data && res.data.code === 'T') {
    this.$message('导入成功')
  }
}

后续补充：以上为完整的调用后端接口导入Excel数据，二进制数据流是后端处理的，那么，如果，我们要将导入的excel 数据填充到表格内来展示，如何做到呢？

问题：Excel中有列头有值，我们怎么解析excel中的数据为 json 格式，然后塞到 tableData 中？

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="studyCode"
        label="学号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄">
      </el-table-column>
    </el-table>
  </template>

比如导入的excel 列头有姓名 学号 年龄 等字段，怎么解析这些列头字段呢？

同样的，我们在 utils.js 中定义一个列头对照对象：

import readFile from '@/utils/index'
import xlsx from 'XlSX'
// 定义key值对照对象
export let columns = {
	name: {
		text: '姓名'，
		type: 'string'
	},
	studyCode: {
		text: '学号',
		type: 'string'
	},
	age: {
		text: '年龄',
		type: 'string'
	}
}

处理获取到的excel工作目录中的数据：

// 读取FILE 中的数据(处理为Json对象)
async handleUpLoad (ev) {
	let data = await readFile(file)
	let workbook = xlsx.read(data, {type: 'binary'}),
	worksheet = workbook.Sheets[workbook.Sheets[0]] // 获取第一张工作表
	// 此时的json 对象的key是汉字形式：{姓名：'张三', 年龄：'20'},后续要处理为{name: 'zhangsan', age: '20'}
	data = xlsx.utils.sheet_to_json(worksheet) 
// 把导入进来的数据转换为服务器可以处理的Json 格式（姓名：name 电话：phone）
let arr = []
data.forEach(item => {
	let obj = {}
	for (let key in columns) {
		if (!columns.hasOwnProperty(key)) break; // 此语句排除对象的继承属性
		let v = columns[key],
		text = v.text,
		type = v.type
		v = item[text] || ''
	type === 'string' ? (v = String(v)) : null
	type === 'number' ? (v = Number(v)) : null
	obj[key] = v
}
arr.push(obj)
})
// 然后赋值给tableData
this.tableData = arr // 至此，导入的Excel 数据就填充到表格中了

}