vue——通过get、post方法下载文件并重命名

参考：https://blog.csdn.net/u011301203/article/details/102629952

　　https://www.cnblogs.com/codesyofo/p/14142197.html

 

1.get

fetch无需安装依赖，可直接使用

download(url, params, fileName) {
  const token = localStorage.getItem('token') || ''
  fetch(`${url}?${new URLSearchParams(params)}`, {
    "headers": {
      "X-Access-Token": token
    },
    "method": "GET",
  })
    .then(res => res.blob()) // 此行不要再增加其他代码，否则下载的文件内容会为undefined
    /* 若要增加代码，如下：
     .then((res) => {
        console.log('res', res);
        res.blob().then((res) => {
            ...
        })
    */
    .then(res => {
      const blob = new Blob([res]); // // 将二进制流转为blob
      if ('download' in document.createElement('a')) {
        console.log('非 IE')
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName; // 设置下载文件名
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob) // 创建新的url并指向file对象或blob对象的地址
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else {
        console.log('IE')
        // IE10+下载
        // @ts-ignore
        navigator.msSaveBlob(blob, fileName)
      }
    })
}    

 

 

2.post

downLoad(){
        let that = this
         let params = { // 根据后端需求传参
            meetName: encodeURI(that.meetName),
            htmlText: encodeURI(that.content)
          }
          axios.post('xxx',
　　　　　　　　 params, 
　　　　　　　　{responseType: "arraybuffer"} // 必须添加项，告诉服务器需要的响应格式
          ).then(function (res) {
            const filename = decodeURI(res.headers['filename']); // 后端返回的文件名
            let blob = new Blob([res.data], {type: 'application/msword;charset=utf-8'}); // 将二进制流转为blob
            let a = document.createElement('a');
            let url = window.URL.createObjectURL(blob); // 创建新的url并指向file对象或blob对象的地址
            a.href = url;
            a.download = filename; // 设置下载文件名
            let body = document.getElementsByTagName('body')[0];
            body.appendChild(a);
            a.click();
            body.removeChild(a); // 下载完成移除元素
            window.URL.revokeObjectURL(url); // 释放内存
          })
}

 

当需要后端在返回headers中，包含下载文件名时，后端需要修改部分：

response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")
response.setHeader("Content-Disposition", ...)

 

出现的问题1：

现象

跨域

原因

后端响应头headers未设置，设置好后headers大概如下：

 

出现的问题2：

现象

axios无法获取响应头headers的Content-Disposition字段

原因

默认情况下，header只有六种 simple response headers （简单响应首部）可以暴露给外部：

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

这里的暴露给外部，意思是让客户端可以访问得到，既可以在 Network 里看到，也可以在代码里获取到他们的值。

上面问题提到的 content-disposition 不在其中，所以即使服务器在协议回包里加了该字段，但因没“暴露”给外部，客户端就“看得到，吃不到”。

而响应首部 Access-Control-Expose-Headers 就是控制“暴露”的开关，它列出了哪些首部可以作为响应的一部分暴露给外部。

所以如果想要让客户端可以访问到其他的首部信息，服务器不仅要在heade里加入该首部，还要将它们在 Access-Control-Expose-Headers 里面列出来，即上面后端的处理方法