vue 下载文件流怎么保留原文件名？

Question

vue 下载文件流怎么保留原文件名？

this.$axios.get(${url}/${fileName}`, {
  responseType: "blob",
 }).then((response) => {
   //new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）
   const blob = new Blob([response.data]); 
   const elink = document.createElement('a');
    // 怎么保留获取原文件名？
   elink.download = '文件名.xlsx';

   elink.style.display = 'none';
   elink.href = URL.createObjectURL(blob);
   document.body.appendChild(elink);
   elink.click();
   URL.revokeObjectURL(elink.href); // 释放URL 对象
   document.body.removeChild(elink);
 }).catch((error) => {
   this.$message({
     message: error
   });
 });

elink.download 怎么获取原文件名

Answer 1

服务器返回的信息头 headers['content-disposition'] 里面就有文件名filename（需要服务端有返回 content-disposition 信息，如果没有返回则获取不到）。但是获取到的 filename 时转码过的，所以需要通过 decodeURIComponent() 函数解码回来。

当然，如果你是想使用你下载时候请求的文件名，可以直接使用你请求URL上面的 fileName 变量就行了。

this.$axios.get(`${url}/${fileName}`, ...)

Answer 2

前段时间刚写了一个文章