使用downLoad.js在瀏覽器下載文件

一、業(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?
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容