vue 带token下载文件流,且不乱码

import { fileDownloadList, fileDownload } from "@/api/file/download";
fileDownload(row.fileId).then(
        response => {
          console.log(response)
          const filename = decodeURI(response.headers['content-disposition'].split(';')[1].split('=')[1]);
          let blob = new Blob([response.data],{
            type: response.headers['content-type']
          });
          var blobURL = window.URL.createObjectURL(blob)
          var tempLink = document.createElement('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)
          window.URL.revokeObjectURL(blobURL)
        }
      ).catch(err => {
        console.log(err);
      });

终于下载下来了,但是万万没想到啊,除了txt格式的打开的内容是正常的,其他格式如docx打开的却是乱码。


使用如下方法可以解决文件内容乱码问题:

let baseURL = process.env.VUE_APP_BASE_API;
function createObjectURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}
let xhr = new XMLHttpRequest()
let url = baseURL + '/system/file/download/' + row.fileId;
xhr.open('get', url)
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
xhr.setRequestHeader('Authorization', 'Bearer ' + getToken())
xhr.responseType = 'blob'
var formData = new FormData();
xhr.onreadystatechange = function() {
    if (xhr.readyStatQAe === 4 && xhr.status === 200) {
        const blob = new Blob([xhr.response])
        let url = window.URL.createObjectURL(blob)
        //创建一个a标签元素,设置下载属性,点击下载,最后移除该元素
        let link = document.createElement('a')
        link.href = url
        link.style.display = 'none'
        //取出下载文件名
        const fileName = decodeURI(xhr.getResponseHeader('content-disposition').split(';')[1].split('=')[1]);
        link.setAttribute('download', fileName)
        link.click()
        window.URL.revokeObjectURL(url)
    }
}
xhr.send(formData);

参考
返回文章列表 打赏
本页链接的二维码
打赏二维码
期待你的评论