vue中axios实现上传和下载excel表格功能(下载后端返回的文件流)

上传文档

我看之前只记录一个下载文档，现在补充一下上传功能，比较简单，记录下来是为了帮助需要的人；

第一步：先写接口函数（以我的代码为例）

//根据后端提供的接口，我们封装定义一个接口函数
export function confirmImport(form) {
    return api({
        url: `${dataUrl}/code/file/import`,
        method: 'post',
        headers: { //必不可少
            'Content-Type': 'multipart/form-data'  
        },
        data: form
    })
}

第二步：组件调用接口实现上传

<el-dialog title="导入数据" :visible.sync="uploadDialogVisible" :close-on-click-modal="false" width="400px" :modal-append-to-body="false">
     <div class="upload_box">
         <span>请选择导入文件：</span>
         <el-button @click="downloadPlate" type="text" :loading="exportLoding"><i class="el-icon-tickets" style="margin-right: 4px;" ></i>模板下载</el-button>
         <el-upload 
             class="upload-demo" 
             drag 
             ref="upload" 
             action="" 
             :auto-upload="true" 
             :on-success="uploadSuccess" 
             :disabled="uploadLoding" 
             :show-file-list="false" 
             :http-request="uploadTemplate">
             <i class="el-icon-upload"></i>
             <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         </el-upload>
     </div>
 </el-dialog>

  uploadTemplate(value){
       this.uploadLoding = true
       this.loading = this.$loading({
           lock: true,
           text: "正在上传...",
           spinner: 'el-icon-loading',
           background: 'rgba(0, 0, 0, 0.5)'
       });
       var form = new FormData();
       form.append("file", value.file);
       confirmImport(form).then(res => {
           if(res.status == 200){
              this.uploadSuccess(res.data)
           }
       }).catch(err => {
            this.messageError()
       })
   },
   uploadSuccess(response) {
       if (response.infoCode == 200) {
           setTimeout(() => {
               this.$message({ type: 'success', message: "上传成功" });
               this.uploadDialogVisible = false;
               this.uploadLoding = false
               this.loading.close();
               this.getList()
           },1000)
       } else {
           this.messageError()
       }
   },
  messageError(){
	  this.$message({ type: 'error', message: '网络连接错误，上传失败，请重试！' });
      this.uploadLoding = false
      this.loading.close();
  }

上传比较简单，就是传入参数为form表单形式；

下载文档

之前遇到一个问题：就是做下载excel表格功能时，不知道怎么把后端返回的文件流转化成表格，上网看了很多方法，可能自己没有找对吧，确实可以实现下载，但是下载的表格内容是乱码，个人感觉应该是实现下载函数方法写错了，现在实现了，先记录一下，为了方便日后自己的学习。

上图就是调取后端接口成功后返回的文件流；

接下来我们就一步一步实现下载excel表格的功能，写这个主要是为了自己的学习和记录，如果对你有帮助，我也会很开心，如果有什么不对的，也可以帮我指出错误。

第一步：先写接口函数（以我的代码为例）

responseType 表示服务器响应的数据类型，可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’，默认是‘json’

export function exportAudit(data) {
    return axios({
        url: '/dataassets/asset/audit/export',
        method: 'get',
        params: data,
        responseType: 'blob',
    })
}

第二步：写个下载文件的函数方法

// 下载文件
downloadFile(res, fileName) {
    let blob = new Blob([res.data]); //res为从后台返回的数据
    if (!fileName) {
        fileName = res.headers['content-disposition'].split('filename=').pop();
    }
    if ('msSaveOrOpenBlob' in navigator) {
        window.navigator.msSaveOrOpenBlob(blob, fileName);
    } else {
        const elink = document.createElement('a');
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href);
        document.body.removeChild(elink);
    }
}

第三步：组件中调用接口实现下载

  //导出
  export() {
		    var info={  //需要传入的参数
               pageNum: this.pageConfig.currentPage,
                pageSize: this.pageConfig.pageSize,
                verifyId: this.form.verifyId,
                keyWord: this.form.name
            }
            exportAudit(info).then((res) => {
                //日期转换成字符串
                let date = dateToStr(new Date());
                // downloadFile是实现表格的下载函数方法
                downloadFile(res, 'XX报表-' + date + '.xls');
            }).catch(() => {})
     },

这样做就可以实现文件的下载，如果你还没有解决，可以试试！