前端文件下載方式

一  通過a標簽來下載文件

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

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

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

 點擊非a標簽按鈕下載文件，或者其他一些情況，可以通過創建a標簽來下載

  function downloadFile(fileurl, filename) {

                    var  a = document.createElement('a');           / / 創建隱藏的可下載鏈接

                    a.download = filename;

                    a.style.display = 'none';

                    var  blob = new Blob(fileurl);                            // 字符內容轉變成blob地址

                     a.href = URL.createObjectURL(blob);

                    document.body.appendChild(a);                   

                    a.click();                                                       // 觸發點擊

                     document.body.removeChild(a);                  // 然后移除

            };

        //downFile(fileurl, filename)                               //fileurl ：  下載地址   ；filename ： 保存名稱 

二  通過window.open()

    ex:window.open(fileurl)

三  通過form表單

原生  js  ：

        var form = document.createElement("form");                                                                                                                                                       document.getElementsByTagName('body')[0].appendChild(form);

        form.setAttribute('style', 'display:none');

        form.setAttribute('target', '');

        form.setAttribute('method', 'get');

        form.setAttribute('action', fileurl);//下載文件的請求路徑

        var input1 = document.createElement('input');

        input1.setAttribute('type', 'hidden');

        input1.setAttribute('name', 'clinicId');

        input1.setAttribute('value', sess.clinicId);

        form.appendChild(input1);

        form.submit();

   jQuery:

        var form = $("<form>");                    //定義一個form表單

        form.attr('style', 'display:none');        //下面為在form表單中添加查詢參數

        form.attr('target', '');

        form.attr('method', 'post');

        form.attr('action', fileurl);

        var input = $('<input>');

        input.attr('type', 'hidden');

        input.attr('name', 'exportPostTime');

        input.attr('value', timeString);

        $('body').append(form);                    //將表單放置在web中

        form.append(input);                      //將查詢參數控件提交到表單上

        form.submit();                            //表單提交   

angular:
 var $eleForm = $("<form method='post'></form>");

            $eleForm.attr("action",encodeURI("/downloadFile/"+$scope.fileId));

            $(document.body).append($eleForm);

            //提交表單，實現下載
            $eleForm.submit();*/

 

四  通過  iframe和form

   具體格式形式：

    <iframe name="iframe的name屬性值"     style="display:none;"></iframe>

    <form target="iframe的name屬性值"   method="post"      action="指向后端請求鏈接"     style="display:none;"    >

            <input type="text" name="后台對應的name字段"      value = "上傳的值" />

    </form>



    js實現

    $("#downLoadIFrame").remove();

        var $Iframe = $("<iframe>");

        $Iframe.attr("name", "iframe的name屬性值");

        $Iframe.attr("id", "downLoadIFrame");

        $Iframe.attr("style", "diaplay:none");

        $("body").append($Iframe);

        var $form = $("<form>");

        $form.empty();

        $form.attr("style", "diaplay:none");

        $form.attr("target", "iframe的name屬性值"); // 對應iframe的name屬性值

        $form.attr("method", "post");

        $form.attr("action", "指向后端請求鏈接"); // 指向后端請求鏈接

        $("body").append($form);

        // 新建input, 並設置name屬性和value的值

        var $input = $("<input>");

        $input.attr("type", "hidden");

        $input.attr("name", "后台對應的name字段"); // 填上后台對應的name字段

        $input.attr("value", "上傳的值"); // 填上傳的值

        $form.append($input);

        $form.submit();

五  總結

        首先，要知道你的fileurl是怎么來的，然后注意文件下載是"post"還是"get"請求，還要注意兼容性

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