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信息,
vue+element项目中导出时文件名称从后台获取_第1张图片
这个时候可以从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;
        }

你可能感兴趣的:(vue+element项目中导出时文件名称从后台获取)