一、业务场景:
web项目,需要在浏览其器中下载文件,常见的做法有(以下三种方式都可以复制代码直接使用,请自行测试)
a、 window.open("htpp://127.0.0.1/test.rar");
b、get请求下载
//url表示请求路径,进入后台处理,后台返回一个文件流
//例如:url为htpp://127.0.0.1/test
function downloadFile(url){
//定义一个form表单,通过form表单来发送请求
var form=$("<form>");
//设置表单状态为不显示
form.attr("style","display:none");
//method属性设置请求类型为get
form.attr("method","get");
//action属性设置请求路径,(如有需要,可直接在路径后面跟参数)
//例如:htpp://127.0.0.1/test?id=123
form.attr("action",url);
//将表单放置在页面(body)中
$("body").append(form);
//表单提交
form.submit();
}
c、post请求下载
//url表示请求路径,进入后台处理,后台返回一个文件流
//例如:url为htpp://127.0.0.1/test
function downloadFile(url){
//定义一个form表单,通过form表单来发送请求
var form=$("<form>");
//设置表单状态为不显示
form.attr("style","display:none");
//method属性设置请求类型为post
form.attr("method","post");
//action属性设置请求路径,
//请求类型是post时,路径后面跟参数的方式不可用
//可以通过表单中的input来传递参数
form.attr("action",url);
$("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();//表单提交
}
a方式许多浏览器不兼容,且txt、xml等文本文件浏览器会自动解析
b、c方法过于复杂,且txt、xml等文本文件浏览器会自动解析
于是我就去百度找了一下,发现了download.js好像不错,用法简单,所以就看了下源码,并试用了一下(效果确实不错)
二、download.js介绍
具体请看官网:http://danml.com/download.html
三、用法
常见用法请看官网实例,官网有一个通过地址下载文件的实例没有给出,我就描述一下
下载调用的方法download(data, strFileName, strMimeType)对应为:download("数据","想要起的名称","Mime类型")
function dl(){
本人刚开始用一直这样尝试,发现下载的内容不对
//download('http://127.0.0.1:8488/default/cll.txt',"test.txt","text/plain");
后来看了源码才知道,当不写后面的两个参数时,就可以下载指定文件了(不支持跨域),源码很简单就是没有后面的参数,就会通过ajax发送一个get请求,获取url的二进制流,然后把二进制流转化为对象就完成了下载工作
download('http://127.0.0.1:8488/default/cll.doc');
//注意:此处不支持中文路径和文件名
}
部分源码
payload = data,
url = !strFileName && !strMimeType && payload
if(url && url.length< 2048){
fileName = url.split("/").pop().split("?")[0];
anchor.href = url; // assign href prop to temp anchor
if(anchor.href.indexOf(url) !== -1){ // if the browser determines that it's a potentially valid url path:
var ajax=new XMLHttpRequest();
ajax.open( "GET", url, true);
ajax.responseType = 'blob';
ajax.onload= function(e){
download(e.target.response, fileName, defaultMime);
};
setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return:
return ajax;
} // end if valid url?
}