vue+axios实现文件下载

2019独角兽企业重金招聘Python工程师标准>>>

后端设置响应头信息

res.setHeader('Content-disposition', "attachment; filename=analysisData.csv");

res.setHeader('Content-Type', 'application/octet-stream');

前端代码

import axios from "axios";

export default {
  methods:{
    fileDownload(data, fileName) {
        let blob = new Blob([data], {
          type: "application/octet-stream"
        });
        let filename = fileName || "filename.csv";
        if (typeof window.navigator.msSaveBlob !== "undefined") {
          window.navigator.msSaveBlob(blob, filename);
        } else {
          var blobURL = window.URL.createObjectURL(blob); //创建下载的链接
          var tempLink = document.createElement("a"); //创建a标签
          tempLink.style.display = "none";
          tempLink.href = blobURL;
          tempLink.setAttribute("download", filename); //下载后文件名
          if (typeof tempLink.download === "undefined") {
            tempLink.setAttribute("target", "_blank");
          }
          document.body.appendChild(tempLink);
          tempLink.click(); //点击下载
          document.body.removeChild(tempLink); //下载完成移除a元素
          window.URL.revokeObjectURL(blobURL); //释放掉blob对象
        }
      },
      getFile(url,params = {}) {
         return new Promise((resolve, reject) => {
           try {
             if (!url || typeof url !== 'string') {
               reject()
               throw new Error('url is not empty and needs')
             }
             axios({
                 params: {
                   ...params
                 },
                 method: "get",
                 url: url,
                 responseType: "arraybuffer" // 重要
               })
               .then((response) => {
                 resolve(response)
               })
               .catch((error) => {
                 reject(error)
                 this.$message.error('网络请求出错');
               })
           } catch (error) {
              console.log(error)
           }
         })
      }
  }
}

使用方法

// 导出单张表格
this.getFile('manage/experiment/export', parm).then((response) => {
     let filename = "experiment.csv";
     this.fileDownload(response.data, filename);
}).catch(err => {
   
})

 

转载于:https://my.oschina.net/wbo0801/blog/2994469