vue 后端接口返回文件流 前端导出excel

 文件导出有多种方式，不同的前后台框架使用的方法也不尽相同。一般有两种方式：一是后端在服务器上生成一个文件，然后提供一个链接地址给前台下载；二是后台返回文件流，前端自己封装方法进行下载。

下面介绍vue中使用后台返回文件流，前端导出excel文件的方法

后台返回文件流：

 前端vue中使用blob来操作：

<div class="file-select">
     <el-input  v-model="file.name"/>
     <el-button @click="selectFile">选择文件</el-button>
     <el-button  :disabled='!file.name'  @click="sureData">确定</el-button>
</div>
 
  <input
      id="importInputFile"
      type="file"
      accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
      @change="uploadFile"
      style="display:none">

    selectFile(){
      document.getElementById('importInputFile').click()
    },
    //导入文件
    uploadFile(event){
      var files = event.target.files
      const file = files[0]
      this.file = file
      event.target.value = ''
    },
    //确认上传
    sureData(){
        const data = new FormData();
        data.append('file', this.file);
        this.$http.post("generateDoc",data,{
            headers: {
                'Content-Type': 'multipart/form-data',
            },
            responseType: 'blob',    // 表明服务器返回的数据类型
        })
        .then((res) => {
            this.$message({
              message: '转化成功',
              type: 'success'
            });
            //创建一个隐藏的a连接，
            const link = document.createElement('a');
            let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
            link.style.display = 'none';
            //设置连接
            link.href = URL.createObjectURL(blob);
            link.download = this.file.name; 
            document.body.appendChild(link);
            //模拟点击事件
            link.click();
         }).catch((err)=>{
              console.log(err);
          });  
    }