一、業(yè)務(wù)場(chǎng)景:
web項(xiàng)目,需要在瀏覽其器中下載文件,常見(jiàn)的做法有(以下三種方式都可以復(fù)制代碼直接使用,請(qǐng)自行測(cè)試)
a、 window.open("htpp://127.0.0.1/test.rar");
b、get請(qǐng)求下載
//url表示請(qǐng)求路徑,進(jìn)入后臺(tái)處理,后臺(tái)返回一個(gè)文件流
//例如:url為htpp://127.0.0.1/test
function downloadFile(url){
//定義一個(gè)form表單,通過(guò)form表單來(lái)發(fā)送請(qǐng)求
var form=$("<form>");
//設(shè)置表單狀態(tài)為不顯示
form.attr("style","display:none");
//method屬性設(shè)置請(qǐng)求類(lèi)型為get
form.attr("method","get");
//action屬性設(shè)置請(qǐng)求路徑,(如有需要,可直接在路徑后面跟參數(shù))
//例如:htpp://127.0.0.1/test?id=123
form.attr("action",url);
//將表單放置在頁(yè)面(body)中
$("body").append(form);
//表單提交
form.submit();
}
c、post請(qǐng)求下載
//url表示請(qǐng)求路徑,進(jìn)入后臺(tái)處理,后臺(tái)返回一個(gè)文件流
//例如:url為htpp://127.0.0.1/test
function downloadFile(url){
//定義一個(gè)form表單,通過(guò)form表單來(lái)發(fā)送請(qǐng)求
var form=$("<form>");
//設(shè)置表單狀態(tài)為不顯示
form.attr("style","display:none");
//method屬性設(shè)置請(qǐng)求類(lèi)型為post
form.attr("method","post");
//action屬性設(shè)置請(qǐng)求路徑,
//請(qǐng)求類(lèi)型是post時(shí),路徑后面跟參數(shù)的方式不可用
//可以通過(guò)表單中的input來(lái)傳遞參數(shù)
form.attr("action",url);
$("body").append(form);//將表單放置在web中
//在表單中添加input標(biāo)簽來(lái)傳遞參數(shù)
//如有多個(gè)參數(shù)可添加多個(gè)input標(biāo)簽
var input1=$("<input>");
input1.attr("type","hidden");//設(shè)置為隱藏域
input1.attr("name","id");//設(shè)置參數(shù)名稱(chēng)
input1.attr("value","123");//設(shè)置參數(shù)值
form.append(input1);//添加到表單中
form.submit();//表單提交
}
a方式許多瀏覽器不兼容,且txt、xml等文本文件瀏覽器會(huì)自動(dòng)解析
b、c方法過(guò)于復(fù)雜,且txt、xml等文本文件瀏覽器會(huì)自動(dòng)解析
于是我就去百度找了一下,發(fā)現(xiàn)了download.js好像不錯(cuò),用法簡(jiǎn)單,所以就看了下源碼,并試用了一下(效果確實(shí)不錯(cuò))
二、download.js介紹
具體請(qǐng)看官網(wǎng):http://danml.com/download.html
三、用法
常見(jiàn)用法請(qǐng)看官網(wǎng)實(shí)例,官網(wǎng)有一個(gè)通過(guò)地址下載文件的實(shí)例沒(méi)有給出,我就描述一下
下載調(diào)用的方法download(data, strFileName, strMimeType)對(duì)應(yīng)為:download("數(shù)據(jù)","想要起的名稱(chēng)","Mime類(lèi)型")
function dl(){
本人剛開(kāi)始用一直這樣嘗試,發(fā)現(xiàn)下載的內(nèi)容不對(duì)
//download('http://127.0.0.1:8488/default/cll.txt',"test.txt","text/plain");
后來(lái)看了源碼才知道,當(dāng)不寫(xiě)后面的兩個(gè)參數(shù)時(shí),就可以下載指定文件了(不支持跨域),源碼很簡(jiǎn)單就是沒(méi)有后面的參數(shù),就會(huì)通過(guò)ajax發(fā)送一個(gè)get請(qǐng)求,獲取url的二進(jìn)制流,然后把二進(jìn)制流轉(zhuǎn)化為對(duì)象就完成了下載工作
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?
}