关于Vue2 - excel下载以及上传excel

在做前端excel导出的时候发现了一个报错

但是这个报错是出现在request中 因为判断401的时候发现少带了个response，导致做excel出现了status为undefind。

现在讲解excel怎么做。

#1 下载包。

yarn add file-saver

#2 导入包。

import { saveAs } from 'file-saver'

#3 重点 在调用接口的时候 一定要问清楚后端是什么类型的文件 但是在发送请求的时候一定要在接口定义类型 responseType: 'blob'。

3.1如果后端返回的是普通数据，需要‘xlsx’把普通数据转换成二进制，然后再通过 ‘file-saver’ 保存为excel文件。

3.2 如果后端传回的是二进制的数据，只需要通过‘file-saver’包保存excel文件。

async btnImportExcel() {
  saveAs(await importExportDate(), '在职员工信息.xlsx')
},

4.该如何上传表格呢？

​​​​​​​跟下载表格是同理，也需要跟后端确认文件类型。

但是需要依靠input获取文件。

废话不多说，上代码！

#1 首先准备一个input框

<input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="uploadChange">

#2 需要一个按钮来唤醒input

<el-button type="text" @click="upLoadExcel">点击上传</el-button>

#1 - #2 代码如下

#1 这是input框需要获取的文件
async uploadChange(res) {
    const files = res.target.files[0]
    // 判断
    if (files) {
      try {
        // #0 加工成 formData
        const f = new FormData()
        // key 不能乱写，是后端固定的，值就是文件信息
        f.append('file', files)
        // #1 上传给后端
        await excelMangerImport(f)
        // #2 前端更新
        this.$emit('getManger')
        // #3 上传完成关闭弹窗
        this.$emit('update:showImportTable', false)
        // #4 提示
        this.$message.success('导入成功')
      } catch (error) {
        console.log(error)
      } finally {
        this.$refs['excel-upload-input'].value = ''
      }
 }


#2 这是按钮唤醒input
upLoadExcel(res) {
   // 唤醒input 需要用refs唤醒
   this.$refs['excel-upload-input'].click()
}

上传最重要的部分 finally

我在实行上传表格时， 发现同样表格名称和不同内容会出现报错，在特此在finally设置清除input的value值，这样保证在同名表格下可以传输不同的内容。