vue+element+axios文件下载（post类型）

最新推荐文章于 2024-07-10 16:36:14 发布

小城听风雨

最新推荐文章于 2024-07-10 16:36:14 发布

阅读量869

点赞数 1

分类专栏： vue的使用心得文章标签： vue+element+axios文件下载（post类型） axios文件下载乱码 vue+axios文件下载返回乱码

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/a5252145/article/details/102744685

版权

vue的使用心得专栏收录该内容

36 篇文章 1 订阅

订阅专栏

vue+element+axios文件下载（post类型）

// 普通a标签下载
<a
  class="download"
  :href="companyMaintainsForm.downloadhttp"
  download
  :title="文件名"
>点我下载</a>

第四十行 this.globalFileName是文件名

// 下载  click事件
uploadDown() {
  let url = "company/getBusinessLicenseByCompanyId";
  let formData = {
    id: this.companyMaintainsForm.companyNewsList.id
  };
  this.downloadFile(url, formData);   // 触发downloadFile方法
},

downFile(blob, fileName) {
   // 非IE下载
   if ("download" in document.createElement("a")) {
     let link = document.createElement("a");
     link.href = window.URL.createObjectURL(blob); // 创建下载的链接
     link.download = fileName; // 下载后文件名
     link.style.display = "none";
     document.body.appendChild(link);
     link.click(); // 点击下载
     window.URL.revokeObjectURL(link.href); // 释放掉blob对象
     document.body.removeChild(link); // 下载完成移除元素
   } else {
     // IE10+下载
     window.navigator.msSaveBlob(blob, fileName);
   }
 },
 downloadFile(url, data) {
   let requestData = Object.assign({}, data, {
     accessToken: sessionStorage.getItem("accessToken")
   });

   // 响应类型：arraybuffer, blob
   this.$axios
     .post(url, requestData, {
       responseType: "blob"
     })
     .then(resp => {
       let headers = resp.headers;
       let contentType = headers["content-type"];

       console.log("响应头信息", headers);
       if (!resp.data) {
         return false;
       } else {
         const blob = new Blob([resp.data], {
           type: contentType
         });

         const contentDisposition = resp.headers["content-disposition"];
         let fileName = this.globalFileName; // this.globalFileName 从后台获取的文件名字
         if (contentDisposition) {
           fileName = window.decodeURI(
             resp.headers["content-disposition"].split("=")[1]
           );
         }
         this.downFile(blob, fileName);
       }
     })
     .catch(function (error) {
       console.log(error);
     });
 },