非文件流下载文件设置文件名

前端下载如果是文件流的话,就直接使用downloadFile方法进行下载,如果是非文件流,要设置文件名,就要转成文件流的方式,解决通过download设置文件名的兼容问题,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
download(url, fileName) {
     function ajax(url, callback, options) {
       window.URL = window.URL || window.webkitURL;
       var xhr = new XMLHttpRequest();
       xhr.open("get", url, true);
       if (options.responseType) {
         xhr.responseType = options.responseType;
       }
       xhr.onreadystatechange = function () {
         if (xhr.readyState === 4 && xhr.status === 200) {
           callback(xhr);
         }
       };
       xhr.send();
     }
     function downloadFile(content, filename) {
       var a = document.createElement("a");
       var blob = new Blob([content]);
       var url = window.URL.createObjectURL(blob);
       a.href = url;
       a.download = fileName;
       a.click();
       window.URL.revokeObjectURL(url);
     }
     ajax(
       url,
       function (xhr) {
         downloadFile(xhr.response, fileName);
       },
       {
         responseType: "blob",
       }
     );
     return false;
   }

 

posted @   樱花雨纷飞  阅读(52)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示