前端调用后端接口导入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 组件，不过这个组件过于复杂和详细，它考虑的场景比较多，但是我们要删繁就简，只获取我们需要的东西即可。

<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 数据就填充到表格中了

}