动态

详情 返回 返回

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.