在做后台web后台开发时，遇到一些表格数据需要导出相应的文件，这就需要js做文件下载操作，通常后台会返回一个文件的链接。

1. 通常模式

通常情况下我们获取到后台返回的文件url打开即可下载文件，可是兼容问题让人脑阔痛。

1
2
3
4
5
6
7
8
//该方法在火狐上没有效果的，在IE浏览器上是可以的
window.open("fileUrl");

//该方法火狐有些版本是不支持的
window.location.href="fileUrl";

//为了解决火狐有些版本不支持,可以改成这种方式
window.location="fileUrl";

2. 封装模式

通过内嵌iframe访问下载

1
2
3
4
5
6
7
8
9
10
11
12
//该方法IE和火狐都可以，
//fileUrl表示要下载的文件路径
function downloadFile(fileUrl) {   
   try{ 
        var elemIF = document.createElement("iframe");   
        elemIF.src = fileUrl;   
        elemIF.style.display = "none";   
        document.body.appendChild(elemIF);   
    }catch(e){ 
        alert("下载异常！");
    }     
}

通过创建form表单GET提交下载

1
2
3
4
5
6
7
8
9
10
11
//表单方式直接下载文件
//fileUrl表示要下载的文件路径,如:htpp://127.0.0.1/test.rar
function downloadFile(fileUrl){
    var form=$("<form>");//定义form表单,通过表单发送请求
    form.attr("style","display:none");//设置为不显示
    form.attr("target","");
    form.attr("method","get");//设置请求类型  
    form.attr("action",fileUrl);//设置请求路径
    $("body").append(form);//添加表单到页面(body)中
    form.submit();//表单提交
}

通过创建form表单POST提交下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//fileUrl表示请求路径,进入后台处理,后台返回一个文件流
function downloadFile(fileUrl){
    //定义一个form表单,通过form表单来发送请求
    var form=$("<form>");

    //设置表单状态为不显示
    form.attr("style","display:none");

    //method属性设置请求类型为post
    form.attr("method","post");

    //action属性设置请求路径,
    //请求类型是post时,路径后面跟参数的方式不可用
    //可以通过表单中的input来传递参数
    form.attr("action",fileUrl);
    $("body").append(form);//将表单放置在web中

    //在表单中添加input标签来传递参数
    //如有多个参数可添加多个input标签
    var input1=$("<input>");
    input1.attr("type","hidden");//设置为隐藏域
    input1.attr("name","id");//设置参数名称
    input1.attr("value","123");//设置参数值
    form.append(input1);//添加到表单中

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