Stories

Detail Return Return

vue+element項目中導出時文件名稱從後台獲取 - Stories Detail

在做後台管理系統項目時,導出功能後端一般返回文件流或者鏈接,前端進行相關處理,今天只説文件流相關內容,之前項目中所有的文件名稱都是前端進行拼接的,像xxxx-20231002122415.xlsx等等,那下載時文件名稱如何從後台獲取呢?

1、首先需要後台配置

在響應標頭中我們可以看到Content-Disposition:attachment;filename=xxxxx.xlsx信息,filename後邊的就是後台返回的文件名稱,一般是進行轉碼的,但是前端一般是拿不到的,需要後端進行配置:

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

2、配置好後,可以看到相應頭部有Access-Control-Expose-Headers信息,
image.png
這個時候可以從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;
        }
user avatar dingtongya Avatar honwhy Avatar grewer Avatar yinzhixiaxue Avatar yelloxing Avatar littlelyon Avatar linx Avatar hard_heart_603dd717240e2 Avatar xiaolei_599661330c0cb Avatar taotao123 Avatar user_ze46ouik Avatar sy_records Avatar
Favorites 67 users favorite the story!
Favorites

Add a new Comments

Some HTML is okay.