表格文件在vue中导入/导出

表格文件导入导出:

导出: 
    把当前页面内容导出excel表格中
(1) 下载excel表格,并放入项目中 
(2) 下载依赖
      npm i --save   1、file-saver     2、xlsx 
(3) admin1.vue中点击导出触发导出函数:
      表头: const tHeader = ['用户名','籍贯','投资时间','收入']
      表头对应字段(内容): const filterVal = ['username','address','createTime','income']
      使用getList获取数据 ,将获取到的数据整理成与表头对应字段的格式 (调用整理格式的方法)
      从excel2Excel中引入方法,并赋值表头、数据和导出文件名称
注意: 导出所有数据: 需要将条数(limit)赋值全部条数(this.total)即可

导入: 
file文件: accept 文件类型(excel后缀:.xlsx,.xls)
(1) 创建button按钮与input框(file类型 提供文件上传), 
      先让input框 css样式隐藏
(2) 点击button按钮后触发input框中的文件上传
             this.$refs['excel-upload-input'].click()
(3) 使用change获取input中的数据信息
(4) 下载并导入XLSX插件，使用new FileReader()构造函数结合XLSX插件读取文件数据 ，
      将上传文件的头部标题信息转换为数组格式，将内容信息转换为JSON对象格式，
      保存在data中，并将数据渲染到页面内

下面内容是面试的时候回答的
(4) 将获取到的数据读取出来 使用readData函数
(5) 将文件流发给后端(把数据解析存储到数据库,获取数据重新渲染即可)
     

读取数据思路:
readData(rawFile){
        // 读取文件对象
        const reader = new FileReader();   
        console.log(reader)
        reader.onload = e => {
        // 获取文件流
            const data = e.target.result 
            const workbook = XLSX.read(data,{type:'array'})
            // 拿到第一个sheet名称
            const firstsheetname = workbook.SheetNames[0];
            // 拿到第一个sheet所对应的数据
            const worksheet = workbook.Sheets[firstsheetname]
            // 读取头部内容
            const header = this.getHeaderRow(worksheet)
            // 读取数据内容
            const results = XLSX.utils.sheet_to_json(worksheet)
            // 将读取的头部内容与数据保存到data中
            this.excelData.header = header;
            this.excelData.results = results;
        }
        reader.readAsArrayBuffer(rawFile)
    },