Vue中excel导出-导入-查看导入（注：二进制转blob

注意：有时候数据可能是二进制流，不方便直接下载，所以需要转 blob，方法如下

通过配置项:告诉axios将下面得请求的返回数组，处理成 blob 类型。

项目中会用到下载excel表格-再上传-点击后查看上传的excel表格

export function saveAs(blob, filename) {
  const url = window.URL.createObjectURL(blob) // 创建一个临时的 URL 对象
  const a = document.createElement('a') // 创建一个 <a> 元素
  a.href = url // 设置 a 链接为临时 URl
  a.download = filename // 下载文件的名字
  a.click() // 模拟点击操作触发下载
  window.URL.revokeObjectURL(url)
}

这个方法就是通过创建临时的 URL 对象，再创建一个a标签-设置为临时的 URL -设置文件名字

再释放这个临时创建的 URL 对象

这时候就需要发请求拿数据-再通过这个函数方法实现下载表格文件

①下载excel文件

 async exportExcel() {
      const result = await exportEmployeeExecel()
      saveAs(result, '员工信息表.xlsx')
    }

exportEmployeeExecel是封装请求的方法-saveAs就是下载的方法

这个时候我们就实现了下载文件的功能。

②：导入填写好的excel文件-上传

用到element组件库的上传文件-给导入添加点击事件-通过ref/refs绑定上传文件

<el-row type="flex" justify="center">
      <div class="upload-excel">
        <input
          ref="excel-upload-input"
          class="excel-upload-input"
          type="file"
          accept=".xlsx, .xls"
          @change="onFileChange"
        >
        <div class="drop">
          <i class="el-icon-upload" />
          <el-button type="text" @click="download">下载导入模板</el-button>
          <span>将文件拖到此处或
            <el-button type="text" @click="$refs['excel-upload-input'].click()">点击上传</el-button>
          </span>
        </div>

这个是封装的方法（参考）

监听change事件 被方法处理，判断用户有没有选择文件-通过提示将成功/错误的信息提示给用户-

然后再自动清空表单的数据。

// 当用户选择完文件后,触发change事件  被onFileChange处理
    onFileChange(e) {
      if (!e.target.files.length) return // 判断有没有选中文件
      console.log(e.target.files)
      const file = e.target.files[0]  //将用户选择的第一个文件赋值给变量
      const formData = new FormData() //创建一个新的 FormData对象，用于将文件数据添加到表单中
      //通过调用 append 方法将文件添加到 FormData 中，以便后续使用
      formData.append('file', file)

      uploadExcel(formData)
        .then(() => {
          this.$message.success('恭喜你,导入成功')
          this.$emit('done')
          // 关闭弹框
          this.$emit('update:showExcelDialog', false)
        })
        .catch(() => {

        })
        .finally(() => {
          e.target.value = ''
        })
    }

③下载（查看）导入的（根据场景 如果本地没有保存的表格则可以通过下载导入的表格）

async download() {
      const result = await downloadTemplate()
      saveAs(result, '员工信息表模版')
    },

添加点击事件后 用户点击后就可以下载excel文件。