excel文件的导入导出（vue）

文件导出：
1.安装文件导出插件：

 cnpm i js-export-excel

这里有个注意事项，就是在ts中使用这个插件时 需要在这个模块包中加入一个.d.ts文件。或者在全局的.d.ts文件中添加一句 declare module 'js-export-excel。

2、在代码中导入安装的插件
这里有一个之前遇到过的大坑，就是在导入的时候，一定要看看moudel依赖中的这个模块的导出是否是引入的名字，否则项目就会一直在加载中，加载不出来。

// 导入 导出文件的插件
import ExportJsonExcel from 'js-export-excel';

3、在按钮的点击事件的回调函数中配置导出项

 const option = {
    fileName: '商品信息',
    datas: [
      {
        // 原数据
        sheetData: tableData,
        // 表名字
        sheetName: '表1',
        // 原数据的导出的字段
        sheetFilter: ['proname', 'proid', 'brand', 'category'],
        sheetHeader: ['商品名称', '商品id', '牌子', '分类']
      }
    ]
  }

4、将配置项转换成json格式的数据：

// 将配置对象，配置成 excel 表格文件
  const toExcel = new ExportJsonExcel(option)

5、将表格文件保存在本地

 toExcel.saveExcel()

文件导入(后渲染在页面或者传给后台)：
1、
安装插件

 cnpm i xlsx

2、导入安装的插件

import * as XLSX from 'xlsx'

3、在模板中用input来上传文件，配合change事件，用$event来获取事件对象，e.target.file[0]就是上传的文件对象。

 <!-- 用$event获取事件对象 -->
      <input type="file" @change="upload($event)" />

4、写change的回调
获取上传的文件对象，
定义文件读取器
将文件转换成二进制数据流
在读取成功的回调函数中：将文件数据流转换成js对象
将目标文件表读取出来
将内容转换成json格式的 发送给后端。

const upload = (e) => {
  console.log(e.target.files[0]);
  const reader = new FileReader()
  reader.readAsBinaryString(e.target.files[0])

  // 读取成功之后的回调函数
  reader.onload = () => {
    // 将文件数据流转换成 js 对象
    const box = XLSX.read(reader.result, { type: 'binary' })
    // 将 工作表1 中的内容读取出来
    let res = box.Sheets['表1']
    // 将表内容转换成 json 数据
    res = XLSX.utils.sheet_to_json(res)
    // 至此，转换成了jaso格式的数据
    console.log(res);
  }
    
  }