前端文件下載方式

時間 2019-12-18

標籤前端文件下載方式简体版

原文原文鏈接

一經過a標籤來下載文件

在html5中 a 標籤多了一個屬性download；沒有添加download屬性，用戶點擊a連接瀏覽器會打開並顯示該連接的內容，若在a連接中加了 download 屬性，點擊該連接就不會打開這個文件，而是直接下載。注意：download屬性是html5中的a標籤的新特性，與不支持h5的低版本瀏覽器不兼容！html

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

        download屬性的值是下載後的文件名，href屬性的值是 後端文件下載接口地址

點擊非a標籤按鈕下載文件，或者其餘一些狀況，能夠經過建立a標籤來下載html5

 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)web

三經過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