文件下载前端js三种方式

背景介绍

在公司开发业务经常会用到，文件下载相关功能，产品要去的形式不同：点击链接就可以下载、form提交下载、伪提交form下载。
下面就三种方式逐一介绍。

伪form提交下载

先上代码：

function downloadFile(url, data, method) {
    var form = document.createElement('form');
    form.setAttribute('style','display:none');
    form.setAttribute('target','');
    form.setAttribute('method','post');
    form.setAttribute('action',url)
    $('body').append(form);
        jQuery.each(data.split('&'), function () {
            var pair = this.split('=');
            var inputContent = document.createElement('input');
            inputContent.setAttribute('type','hidden');
            inputContent.setAttribute('name',pair[0]);
            inputContent.setAttribute('value',pair[1]);
            form.append(inputContent);
        });

    form.submit();
    form.remove();
}

整体的思路就是通过按钮点击事件隐性的建立一个表单，给表单赋值元素的值（input框），和属性值（method，url等），提交给后台进行文件下载。

form表单提价下载

顾名思义就是通过form表单的action，submit之后进行传输到后台下载的方式，代码走起：

链接下载的方式

这种方式一般在列表，或者有明确下载文件的时候（比如模板）