前端文件下载方式

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

一 通过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();                            //表单提交 

四 通过 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"请求，还要注意兼容性。
本篇文章只是展示了几种常用的，简单的文件下载方式，大家参考之余，可以发散思维，不如看一下文件下载的插件是怎么实现的，文件批量是下载是可以怎么实现，文件流中，图片，视频，音频等是怎么做到批量下载！
最后，感谢大家阅读，希望大家不吝赐教，不吝点赞！