動態

詳情 返回 返回

vue+element項目中導出時文件名稱從後台獲取 - 動態 詳情

在做後台管理系統項目時,導出功能後端一般返回文件流或者鏈接,前端進行相關處理,今天只説文件流相關內容,之前項目中所有的文件名稱都是前端進行拼接的,像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 頭像 honwhy 頭像 grewer 頭像 yinzhixiaxue 頭像 yelloxing 頭像 littlelyon 頭像 linx 頭像 hard_heart_603dd717240e2 頭像 xiaolei_599661330c0cb 頭像 taotao123 頭像 user_ze46ouik 頭像 sy_records 頭像
點贊 67 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.