js 在 header 中传递 token 下载文件

解

答案是使用 FileSaver.js。下面提供一些关键代码。

后端

// 文件名
String fileName = "文件名.文件后缀";
// 依情况而定，我下载的是 xls 文件
response.setContentType("application/vnd.ms-excel;charset=utf-8");
// 传递文件名，这里将文件名编码后又替换了 + 号
response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, StandardCharsets.UTF_8.name()).replace("+","%20"));
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");

前端

const xhr = new XMLHttpRequest()
xhr.open('GET', '接口地址')
xhr.responseType = 'blob'
xhr.onload = function () {
  const fileName = xhr.getResponseHeader("Content-Disposition").split(";")[1].split("filename=")[1];
  saveAs(xhr.response, decodeURI(fileName));
}
// 传递 token
xhr.setRequestHeader('token', localStorage.getItem("token"));
xhr.send();

参考资料

• javascript - How to set a header for a HTTP GET request, and trigger file download? - Stack Overflow
• Saving a remote file · eligrey/FileSaver.js Wiki
• angularjs 文件下载 并 从 response header 中获取文件名_diaoman4889 的博客 - CSDN 博客