前端文件下载方式方法总结

目录

• 1、利用form.submit直接向后端提交,后端返回文件流
• 2、利于iframe直接向后端提交,后端返回文件流
• 3、使用windows.open下载文件
• 4、解决“无法根据回调函数做交互”的问题&＃xff1a;ajax提交&＃xff0c;后端返回在线文件地址
• 5、解决“无法根据回调函数做交互”的问题&＃xff1a;jquery-download 插件
• 1、利用Html5的download属性进行下载
• 2、利用Html5的Blob对象实现对文件流进行下载
  • &＃xff08;1&＃xff09;、 使用原生js发送ajax实现
  • &＃xff08;2&＃xff09;、 使用结合jq发送ajax请求实现&＃xff0c;需要引入jquery.binarytransport.js插件&＃xff0c;其扩展了jq的ajax的dataType的设置&＃xff1b;
• 3、新兴方案中的综合方案&＃xff1a;file-saver
  • &＃xff08;1&＃xff09;、FileSaver.js 功能特点
  • &＃xff08;2&＃xff09;、安装
  • &＃xff08;3&＃xff09;、demo:使用 FileSaver.js下载后端返回的文件流&＃xff1b;
• 4、新兴方案的优缺点&＃xff1a;

正文

#传统方法

利用iframe 或 form.submit 或 windows.open直接向后端发请求,后端返回文件流&＃xff0c;后端处理成功后会直接返回到页面&＃xff0c;浏览器会整理并打开自己的保存下载文件机制 。

回到顶部

1、利用form.submit直接向后端提交,后端返回文件流

　　1&＃xff09;前端代码&＃xff1a;

1 var downloadURL &＃61; "RestHandle.ashx";2 var testForm &＃61; $(""); //定义一个form表单3 testForm.attr(&＃39;style&＃39;,&＃39;display:none&＃39;); //设置form表单属性4 testForm.attr(&＃39;target&＃39;,&＃39;&＃39;);5 testForm.attr(&＃39;method&＃39;,&＃39;post&＃39;);6 testForm.attr(&＃39;action&＃39;,downloadURL);7 8 var nameInput &＃61; $(&＃39;&＃39;); //构造formdata9 nameInput.attr(&＃39;type&＃39;,&＃39;hidden&＃39;);
10 nameInput.attr(&＃39;name&＃39;,&＃39;fileName&＃39;);
11 nameInput.attr(&＃39;value&＃39;,&＃39;test.txt&＃39;);
12
13 $(&＃39;body&＃39;).append(testForm); //将表单放置在web中
14 testForm.append(nameInput); //将formdata添加到表单上
15 testForm.submit(); //表单提交
16 testForm.remove(); //表单移除

  2&＃xff09;服务端代码&＃xff0c;以asp.net为例&＃xff1a;

1 public class TestHandler : IHttpHandler2 {3 4 public void ProcessRequest(HttpContext context)5 {6 string fileName &＃61; context.Request["FileName"];//客户端传送过来的要下载的文件名7 string filePath &＃61; System.Web.HttpContext.Current.Server.MapPath("DownLoad/" &＃43; fileName);//路径8 9 FileInfo newFile &＃61; new FileInfo(filePath);
10
11 //以字符流的形式下载文件
12 FileStream fs &＃61; new FileStream(filePath, FileMode.Open);
13 byte[] bytes &＃61; new byte[(int)fs.Length];
14 fs.Read(bytes, 0, bytes.Length);
15 fs.Close();
16 context.Response.ContentType &＃61; "application/octet-stream";
17 //通知浏览器下载文件而不是打开
18 context.Response.AddHeader("Content-Disposition", "attachment; filename&＃61;" &＃43; HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8));
19 context.Response.BinaryWrite(bytes);
20 context.Response.Flush();
21 context.Response.End();
22 }
23
24 public bool IsReusable
25 {
26 get
27 {
28 return false;
29 }
30 }
31 }

　3&＃xff09;优缺点&＃xff1a;

　　　　优点 &＃xff1a;兼容性良好&＃xff0c;传统方式&＃xff0c;不会出现URL长度限制问题&＃xff1b;

　　　　缺点&＃xff1a;拿不到后端处理这个过程的时机&＃xff0c;无法根据回调函数做交互以及进度提示

2、利于iframe直接向后端提交,后端返回文件流

　　1&＃xff09;前端代码&＃xff1a;

1 function downFileByIframe(parameters) {
2 var downloadURL &＃61; "TestHandler.ashx?FileName&＃61;test.txt";
3 var iframe &＃61; document.createElement("iframe");
4 iframe.src &＃61; downloadURL;
5 iframe.style.display &＃61; "none";
6 document.body.appendChild(iframe);
7 }

        2&＃xff09;后端代码&＃xff1a;同上

　　3&＃xff09;优缺点&＃xff1a;

　　　　优点&＃xff1a; 兼容性较好

　　　　缺点&＃xff1a; *html中会增加多余的iframe元素&＃xff0c;增加了维护成本&＃xff1b;

　　　　     　　*拿不到后端处理这个过程的时机&＃xff0c;无法根据回调函数做交互以及进度提示&＃xff1b;

     　　　　　　*URL长度有限制&＃xff1b;

3、使用windows.open下载文件

　　1&＃xff09;前端代码

1 var downloadURL &＃61; "TestHandler.ashx?FileName&＃61;test.txt";
2 window.open(downloadURL);

　　2&＃xff09;后端代码&＃xff1a;同上

　　3&＃xff09;优缺点&＃xff1a;

　　　　优点&＃xff1a;  兼容性良好&＃xff0c;代码简洁&＃xff1b;

　　　　缺点&＃xff1a; *URL长度有限制&＃xff1b;

　　　　     　　*拿不到后端处理这个过程的时机&＃xff0c;无法根据回调函数做交互以及进度提示&＃xff1b;

4、解决“无法根据回调函数做交互”的问题&＃xff1a;ajax提交&＃xff0c;后端返回在线文件地址

　　利用ajax去提交请求&＃xff0c;后端会返回一个线上的文件地址&＃xff0c;前端可以通过原生的window.open打开这个地址就可以实现下载&＃xff1b;

　　也可以通过a标签设置href以及download属性&＃xff0c;并自动点击实现其下载功能&＃xff0c;关于其兼容性问题&＃xff0c;可以判断download属性是否存在来弥补。

　　1&＃xff09;优缺点&＃xff1a;

　　优点 &＃xff1a;可以拿到其返回时机&＃xff0c;可以做交互&＃xff1b;

　　缺点 &＃xff1a;线上产生大量的中间临时文件&＃xff0c;可以用设置时限来优化。解决方案&＃xff1a;可使用大厂的云存储&＃xff0c;从而减少临时文件的产生&＃xff1b;

　　2&＃xff09;前端代码&＃xff1a;

1 $.ajax({2 type: "post",3 url: "TestHandler.ashx",4 data: {&＃39;FileName&＃39;:&＃39;test.txt&＃39;},5 success: function (res) {6 if (res.Status) {7 // window.open或者a标签下载 8 var isSupportDownload &＃61; &＃39;download&＃39; in document.createElement(&＃39;a&＃39;);9 if (isSupportDownload) {
10 var $a &＃61; $("");
11 $a.attr({
12 href: res.url,
13 download: &＃39;filename&＃39;
14 }).hide().appendTo($("body"))[0].click();
15 } else {
16 window.open(res.url)
17 }
18 } else {
19 alert(res.Message);
20 }
21 }
22 })

5、解决“无法根据回调函数做交互”的问题&＃xff1a;jquery-download 插件

DownloadAttrTest

　　2&＃xff09;后端代码&＃xff1a;同上

　　3&＃xff09;优缺点&＃xff1a;

　　　　优点&＃xff1a;代码简洁

　　　　缺点&＃xff1a;存在浏览器兼容性的问题

 　　4&＃xff09;参考&＃xff1a;

　　　　https://www.zhangxinxu.com/wordpress/2016/04/know-about-html-download-attribute/

2、利用Html5的Blob对象实现对文件流进行下载

&＃xff08;1&＃xff09;、 使用原生js发送ajax实现

　　1&＃xff09;前端代码&＃xff1a;

1 function downByBlob_1(parameters) {2 var downloadURL &＃61; "TestHandler.ashx?FileName&＃61;zip.rar";3 let xhr &＃61; new XMLHttpRequest()4 let fileName &＃61; &＃39;zip.rar&＃39; // 文件名称 5 xhr.open(&＃39;GET&＃39;, downloadURL, true);6 xhr.responseType &＃61; &＃39;arraybuffer&＃39;;7 //xhr.setRequestHeader(&＃39;xx&＃39;, &＃39;xxxxx&＃39;) // 请求头中添加信息8 xhr.onload &＃61; function () {9 if (this.status &＃61;&＃61;&＃61; 200) {
10 let type &＃61; xhr.getResponseHeader(&＃39;Content-Type&＃39;)
11
12 let blob &＃61; new Blob([this.response], { type: type })
13 if (typeof window.navigator.msSaveBlob !&＃61;&＃61; &＃39;undefined&＃39;) {
14 /*
15 * IE workaround for "HTML7007: One or more blob URLs were revoked by closing
16 * the blob for which they were created. These URLs will no longer resolve as
17 * the data backing the URL has been freed."
18 */
19 window.navigator.msSaveBlob(blob, fileName);
20 } else {
21 let URL &＃61; window.URL || window.webkitURL;
22 let objectUrl &＃61; URL.createObjectURL(blob);
23 console.log(objectUrl);
24 //"blob:http://localhost:10614/3e48b856-fca6-4e4c-b780-1c4a7066f42e"
25 if (fileName) {
26 var a &＃61; document.createElement(&＃39;a&＃39;);
27 // safari doesn&＃39;t support this yet
28 if (typeof a.download &＃61;&＃61;&＃61; &＃39;undefined&＃39;) {
29 window.location &＃61; objectUrl
30 } else {
31 a.href &＃61; objectUrl;
32 a.download &＃61; fileName;
33 document.body.appendChild(a);
34 a.click();
35 a.remove();
36 }
37 } else {
38 window.location &＃61; objectUrl;
39 }
40 }
41 }
42 }
43 xhr.send();
44 }

   2&＃xff09;后端代码&＃xff1a;同上

&＃xff08;2&＃xff09;、 使用结合jq发送ajax请求实现&＃xff0c;需要引入jquery.binarytransport.js插件&＃xff0c;其扩展了jq的ajax的dataType的设置&＃xff1b;

　　jquery.binarytransport.js插件github地址&＃xff1a;https://github.com/henrya/js-jquery/tree/master/BinaryTransport

　　注意&＃xff1a;当下载的是纯文本文件时&＃xff0c;是不需要引入插件&＃xff0c;ajax也不用配置dataType&＃xff0c;直接用jq的ajax即可&＃xff1b;

　　1&＃xff09;前端代码&＃xff1a;

1 function downByBlob_2(parameters) {2 $.ajax({3 type: "post",4 url: "TestHandler.ashx",5 data: { &＃39;FileName&＃39;: &＃39;zip.rar&＃39; },6 dataType: &＃39;binary&＃39;,7 responseType: &＃39;arraybuffer&＃39;,8 success: function (msg) {9 let blob &＃61; new Blob([msg]);
10
11 console.log("Blob:" &＃43; msg); //msg 已不是乱码
12 let url &＃61; window.URL.createObjectURL(blob);
13
14 let a &＃61; document.createElement("a");
15 document.body.appendChild(a);
16 a.href &＃61; url;
17 a.download &＃61; &＃39;zip.rar&＃39;; //命名下载名称
18 a.click(); //点击触发下载
19 window.URL.revokeObjectURL(url); //下载完成进行释放
20 }
21 });
22 }

        2&＃xff09;后端代码&＃xff1a;同上

 　　3&＃xff09;参考&＃xff1a;　　

　　　　http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/

　　　　https://blog.csdn.net/aydongzhiping/article/details/82462473

3、新兴方案中的综合方案&＃xff1a;file-saver

&＃xff08;1&＃xff09;、FileSaver.js 功能特点

• FileSaver.js 是一款基于 HTML5 完成文件保存的插件&＃xff0c;它可以帮我们直接从网页中导出多种格式文件。
• 同时对于那些本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器&＃xff0c;FileSaver.js 也提供了支持。
• 使用 FileSaver.js 可以让 Web 应用完美的生成文件&＃xff0c;或者保存那些不应该发送到外部服务器的敏感信息。是一种简单易用的浏览器端文件保存方案。

&＃xff08;2&＃xff09;、安装

　　FileSaver.js  github地址&＃xff1a;https://github.com/eligrey/FileSaver.js

　　可直接下载 FileSaver.js 然后在页面中引用&＃xff1b;

　　npm、bower 安装&＃xff1a;

npm install file-saver --save
bower install file-saver

&＃xff08;3&＃xff09;、demo:使用 FileSaver.js下载后端返回的文件流&＃xff1b;

　　1&＃xff09;前端代码&＃xff1a;

1 function downByFileSaver(parameters) {
2 saveAs(&＃39;TestHandler.ashx?FileName&＃61;zip.rar&＃39;);
3 }

     2&＃xff09;后端代码&＃xff1a;同上

回到顶部

4、新兴方案的优缺点&＃xff1a;

　　优点&＃xff1a;技术新颖&＃xff0c;某些场景下使用方便&＃xff1b;

　　缺点&＃xff1a;兼容性不好&＃xff1b;

5.使用 Javascript API -- fetch 实现文件下载功能

　前端代码:

fetch(&＃39;https://jsonplaceholder.typicode.com/todos/1&＃39;).then(resp &＃61;> resp.blob()).then(blob &＃61;> {const url &＃61; window.URL.createObjectURL(blob);const a &＃61; document.createElement(&＃39;a&＃39;);a.style.display &＃61; &＃39;none&＃39;;a.href &＃61; url;// the filename you wanta.download &＃61; &＃39;todo-1.json&＃39;;document.body.appendChild(a);a.click();window.URL.revokeObjectURL(url);alert(&＃39;your file has downloaded!&＃39;); // or you know, something with better UX...}).catch(() &＃61;> alert(&＃39;oh no!&＃39;));

  后端代码同上

#参考

　　https://juejin.im/post/5bd5547a6fb9a05cdd2d5109

　　https://juejin.im/post/5bd1b0aa6fb9a05d2c43f004

　　https://www.cnblogs.com/yunser/p/7629399.html

　　https://blog.csdn.net/wt346326775/article/details/83617663