// 附件下載
export function downloadPdfs(data) {
  return request({
    url: '/organizaitonApproval/downloadWord',
    method: 'post',
    data: data,
    responseType: 'blob', // 需要加blob
  })
}

但是用上面的方法發(fā)現(xiàn)只能順利下載文件，res.headers["content-disposition"] 取不到后端給前端返回的請求頭。

通過問題排查發(fā)現(xiàn)：

如圖，前端需要取的res.headers 和 res.data 是一層的，當攔截器中返回res.data 后，就取不到外層的headers，因此前端要自己寫axios請求方法

import { getToken } from "@/utils/auth";
import axios from 'axios';
axios.defaults.headers['Authorization'] = 'Bearer ' + getToken();
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';

downloadFile(row) {
      let data={
        orgId: row.orgId
      }
      axios({
          method: 'post',
          url: '/organizaitonApproval/downloadWord',
          data: data,
          responseType: 'blob'
        }).then((res) => {
            // 文件流
            const content = res;
            const blob = new Blob([content]);
            let url = window.URL.createObjectURL(blob);
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;

            // 取后端給前端返的請求頭中的文件名稱
            const temp =res.headers["content-disposition"].split(";")[1].split("filename=")[1];
            console.log("temp:" + temp)
    
            link.download = fileName
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link); //下載完成移除元素
            window.URL.revokeObjectURL(url); //釋放掉blob對象
      })
      .catch(error => {
        //console.log(error);
      });
    }

但是前端依舊拿不到 res.headers["content-disposition"] ，如圖，headers里面沒有content-disposition 屬性

繼續(xù)排查問題，發(fā)現(xiàn)后端沒有給前端單獨塞，需要找后端再改一下

三、后端需要給前端單獨塞一個 Content-Disposition

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

拿到res.headers["content-disposition"] 后，發(fā)現(xiàn)此時temp是亂碼，需要前端自己轉(zhuǎn)一下。

四、未經(jīng)過處理，直接拿到后端給前端的亂碼filename

%E8%BD%AF%E4%BB%B6%E9%A1%B9%E7%9B%AE%E8%AE%A1%E5%88%92%E8%A1%A8.docx

五、前端文件亂碼的轉(zhuǎn)碼方法

1、方法一：安裝iconv-lite依賴

（1）下載模塊包，使用npm install iconv-lite

（2）在項目中引入iconv-lite

import iconv from ‘iconv-lite’;

let iconv = require('iconv-lite'); 
iconv.skipDecodeWarning = true;//忽略警告
let buf = iconv.decode(temp, 'gdk');
const fileName = iconv.decode(buf, 'utf-8')
console.log('fileName_',fileName)

2、方法二：采用后端java在響應(yīng)頭中的里設(shè)置文件名稱(URLEncoder.encode)。前端vue，var fileName = decodeURIComponent(fileNameUtf8)，進行解碼。

前端代碼如下：

downloadFile(row) {
      let data={
        orgId: row.orgId
      }
      axios({
          method: 'post',
          url: '/organizaitonApproval/downloadWord',
          data: data,
          responseType: 'blob'
        }).then((res) => {
        ? ? // 文件流
? ?         const content = res;
? ?         const blob = new Blob([content]);
? ?         let url = window.URL.createObjectURL(blob);
? ?         let link = document.createElement("a");
? ?         link.style.display = "none";
? ?         link.href = url;

? ? ? ? ? ? // 取后端給前端返的請求頭中的文件名稱
? ? ? ? ? ? const temp =res.headers["content-disposition"].split(";")[1].split("filename=")[1];
? ?         const fileName = decodeURIComponent(temp)
? ?         console.log("fileName:" + fileName)
? ? 
? ?         link.download = fileName
? ?         document.body.appendChild(link);
? ?         link.click();
? ?         document.body.removeChild(link); //下載完成移除元素
? ?         window.URL.revokeObjectURL(url); //釋放掉blob對象
      })
      .catch(error => {
        //console.log(error);
      });
    }

我采用的第二種方法

<** ----------2023-06-16 ---------- *>

【注：方法一的“安裝iconv-lite依賴”可能不行，今天想起來這個試了一下，發(fā)現(xiàn)依賴引入后，雖然解決了亂碼的問題，但是會導(dǎo)致通過原有攔截器的文件下載全部報錯，將該依賴卸載后，通過攔截器下載的文件恢復(fù)正常。所以最后還是得用方法二】

最后效果：

參考：解決前后端傳送文件名，出現(xiàn)亂碼問題，URLEncoder_urlencoder.encode 亂碼-CSDN博客

axios獲得文件流，轉(zhuǎn)為blob，出現(xiàn)部分文件亂碼問題解決思路_js請求后端的文件流轉(zhuǎn)為blob之后變了-CSDN博客文章來源地址http://www.zghlxwxcb.cn/news/detail-429697.html