前端文件下载方式

前端对于文件下载这块的一些常用的基本方法。

一  通过a标签来下载文件

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

         ex:    

        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.attr('style', 'display:none');        //下面为在form表单中添加查询参数

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

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

        form.attr('action', fileurl);

        var input = $('');

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

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

        input.attr('value', timeString);

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

        form.append(input);                      //将查询参数控件提交到表单上

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

四  通过  iframe和form

      具体格式形式：

    

   

            

    

    js实现

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

        var $Iframe = $("