前端文件下载方式

一  通过a标签来下载文件

          在html5中 a 标签多了一个属性download；没有添加download属性，用户点击a链接浏览器会打开并显示该链接的内容，若在a链接中加了 download 属性，点击该链接就不会打开这个文件，而是直接下载。注意：download属性是html5中的a标签的新特性，与不支持h5的低版本浏览器不兼容！

     ex: <a download="文件名" href="文件下载接口地址"></a>   

        download属性的值是下载后的文件名，href属性的值是 后端文件下载接口地址

 点击非a标签按钮下载文件，或者其他一些情况，可以通过创建a标签来下载

 1   function downloadFile(fileurl, filename) {
 2
 3                     var  a = document.createElement('a');           / / 创建隐藏的可下载链接
 4
 5                     a.download = filename;
 6
 7                     a.style.display = 'none';
 8
 9                     var  blob = new Blob(fileurl);                            // 字符内容转变成blob地址
10
11                      a.href = URL.createObjectURL(blob);
12
13                     document.body.appendChild(a);                   
14
15                     a.click();                                                       // 触发点击
16
17                      document.body.removeChild(a);                  // 然后移除
18
19             };
20
21         //downFile(fileurl, filename)                               //fileurl ：  下载地址   ；filename ： 保存名称 
22 

二  通过window.open()

    ex:window.open(fileurl)

三  通过form表单

 1 原生  js  ：
 2
 3         var form = document.createElement("form");                                                                                                                                                       document.getElementsByTagName('body')[0].appendChild(form);
 4
 5         form.setAttribute('style', 'display:none');
 6
 7         form.setAttribute('target', '');
 8
 9         form.setAttribute('method', 'get');
10
11         form.setAttribute('action', fileurl);//下载文件的请求路径
12
13         var input1 = document.createElement('input');
14
15         input1.setAttribute('type', 'hidden');
16
17         input1.setAttribute('name', 'clinicId');
18
19         input1.setAttribute('value', sess.clinicId);
20
21         form.appendChild(input1);
22
23         form.submit();

 1    jQuery:
 2
 3         var form = $("<form>");                    //定义一个form表单
 4
 5         form.attr('style', 'display:none');        //下面为在form表单中添加查询参数
 6
 7         form.attr('target', '');
 8
 9         form.attr('method', 'post');
10
11         form.attr('action', fileurl);
12
13         var input = $('<input>');
14
15         input.attr('type', 'hidden');
16
17         input.attr('name', 'exportPostTime');
18
19         input.attr('value', timeString);
20
21         $('body').append(form);                    //将表单放置在web中
22
23         form.append(input);                      //将查询参数控件提交到表单上
24
25         form.submit();                            //表单提交   

1 angular:
2  var $eleForm = $("<form method='post'></form>");
3
4             $eleForm.attr("action",encodeURI("/downloadFile/"+$scope.fileId));
5
6             $(document.body).append($eleForm);
7
8             //提交表单，实现下载
9             $eleForm.submit();*/

四  通过  iframe和form

 1    具体格式形式：
 2
 3     <iframe name="iframe的name属性值"     style="display:none;"></iframe>
 4
 5     <form target="iframe的name属性值"   method="post"      action="指向后端请求链接"     style="display:none;"    >
 6
 7             <input type="text" name="后台对应的name字段"      value = "上传的值" />
 8
 9     </form>
10
11
12
13     js实现
14
15     $("#downLoadIFrame").remove();
16
17         var $Iframe = $("<iframe>");
18
19         $Iframe.attr("name", "iframe的name属性值");
20
21         $Iframe.attr("id", "downLoadIFrame");
22
23         $Iframe.attr("style", "diaplay:none");
24
25         $("body").append($Iframe);
26
27         var $form = $("<form>");
28
29         $form.empty();
30
31         $form.attr("style", "diaplay:none");
32
33         $form.attr("target", "iframe的name属性值"); // 对应iframe的name属性值
34
35         $form.attr("method", "post");
36
37         $form.attr("action", "指向后端请求链接"); // 指向后端请求链接
38
39         $("body").append($form);
40
41         // 新建input, 并设置name属性和value的值
42
43         var $input = $("<input>");
44
45         $input.attr("type", "hidden");
46
47         $input.attr("name", "后台对应的name字段"); // 填上后台对应的name字段
48
49         $input.attr("value", "上传的值"); // 填上传的值
50
51         $form.append($input);
52
53         $form.submit();
54 

五  总结

        首先，要知道你的fileurl是怎么来的，然后注意文件下载是"post"还是"get"请求，还要注意兼容性

作者：毒行影客
链接：https://www.jianshu.com/p/48ad4346fe4b