在做後台管理系統項目時,導出功能後端一般返回文件流或者鏈接,前端進行相關處理,今天只説文件流相關內容,之前項目中所有的文件名稱都是前端進行拼接的,像xxxx-20231002122415.xlsx等等,那下載時文件名稱如何從後台獲取呢?
1、首先需要後台配置
在響應標頭中我們可以看到Content-Disposition:attachment;filename=xxxxx.xlsx信息,filename後邊的就是後台返回的文件名稱,一般是進行轉碼的,但是前端一般是拿不到的,需要後端進行配置:
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")
2、配置好後,可以看到相應頭部有Access-Control-Expose-Headers信息,
這個時候可以從header中拿到該信息,
// 獲取後台返回的文件名稱
const headerFilename = response.headers["content-disposition"]
?.split(";")[1]
.split("=")[1];
拿到headerFilename後,因為後端是encode過的,所以前端需要decode下,但是有時會出現亂碼情況,而且decode後在其他瀏覽器可能也存在問題,這裏可以一勞永逸的解決。
使用Node.js的iconv-lite解決中文亂碼問題。
if (headerFilename) {
// 對文件名亂碼轉義--【Node.js】使用iconv-lite解決中文亂碼
let iconv = require("iconv-lite");
iconv.skipDecodeWarning = true;
let fileName = iconv.decode(headerFilename, "utf-8");
data.fileName = fileName;
}