JS实现文件下载的三种方式---a标签下载、form表单下载、blob转换url下载

文件下载

根据后台设置的下载格式及请求方式不同，分别采用不同元素的下载。
1、 后台的请求为http请求，返回的格式为url格式，采用a标签下载
2、 后台的请求为直接get请求，返回的格式为文件流，采用form表单下载
3、 后台的请求为http请求，返回的格式为文件流，采用blod转url下载

一、a标签实现文件下载

1、获取下载的文件

$.ajax({
    url:"get-file",
    type:"get",
    dataType:'JSON'
}).then(function(res){
    //获取到从后台响应的数据
    console.log(res);
})

通过a标签实现下载的数据格式为：下载文件的url地址，所以从后台获取数据时得到的是url格式
与后台的交互方式为 ：ajax、get等http请求

2、文件下载

function downLoadFile(res){
    const ele = document.createElement('a');
          ele.setAttribute('href',res.url); //设置下载文件的url地址
          ele.setAttribute('download' , 'download');//用于设置下载文件的文件名
          ele.click();
}

3、完整代码

function downLoadFile(res){
    const ele = document.createElement('a');
          ele.setAttribute('href',res.url); //设置下载文件的url地址
          ele.setAttribute('download' , 'download');//用于设置下载文件的文件名
          ele.click();
}
window.onload = function(){
    $.ajax({
        url:"get-file",
        type:"get",
        dataType:'JSON'
    }).then(function(res){
        if(res.bizNO > 0 ){
            downLoadFile(res);
        }else{
            alert(res.bizMsg);
        }
   }).always(function(){
        alert("连接异常")；
    })
}

二、Form表单提交实现文件下载

1. 表单请求

直接从后台获取数据下载，不使用ajax请求，使用表单的get请求

/**
*@param {[url]} url [get请求的url地址]
*@param {[Object]} data [请求参数：{name:value , name2:value2 , name3:value3}]
*/
function downLoadFile(url , data){
    var $iframe = $('