摘要：如果像本例中這樣的場(chǎng)景會(huì)遇到這樣一個(gè)問題，詳見鏈接當(dāng)請(qǐng)求參數(shù)過長(zhǎng)或?yàn)榱税踩?，就需要用到下載。寫到這里自己都忍不住想錘自己，給自己挖坑不說，這樣來回請(qǐng)求下載，流量，真的是敗家。

這幾天一直在做遠(yuǎn)程文件下載的事，現(xiàn)在總算有了解決，特來記錄一下踩過的坑和想揍自己的心

應(yīng)用場(chǎng)景是這樣的，底層邏輯數(shù)據(jù)請(qǐng)求接口是由Java寫的，也就是說原始文件存在Java服務(wù)端,返回時(shí)有加密措施

由于工作需要，前端獲取數(shù)據(jù)操作需要node服務(wù)器做中間轉(zhuǎn)發(fā)

Java接口使用post方式來請(qǐng)求下載

前端點(diǎn)擊下載后瀏覽器啟用內(nèi)置下載器進(jìn)行下載，并能看到進(jìn)度如下圖所示

先說總結(jié)，下附過程

一般情況下，如果是網(wǎng)盤應(yīng)用或者不涉及多文件下載的場(chǎng)景（如本例中node作為文件服務(wù)器，可以直接與前端交互時(shí)），完全可以通過拼接GET請(qǐng)求url進(jìn)行模擬點(diǎn)擊下載，系統(tǒng)開銷還小，響應(yīng)快。如果像本例中這樣的場(chǎng)景會(huì)遇到這樣一個(gè)問題，詳見鏈接

當(dāng)請(qǐng)求參數(shù)過長(zhǎng)或?yàn)榱税踩托枰玫?b>POST下載。

前端通過模擬表單提交POST請(qǐng)求

node端通過pipe將responseA和responseB串聯(lián)起來，如responseA.pipe(responseB)

Done

最開始沒搞清楚怎么用POST請(qǐng)求下載且前端該怎樣接收和處理，關(guān)鍵字node 前端下載搜到的絕大多數(shù)都是用GET鏈接下載，加上剛剛接觸node沒有很好理解流的概念，因此一根筋的想如何通過POST請(qǐng)求轉(zhuǎn)換成GET請(qǐng)求下載，于是自作主張采用了笨辦法，走上了一條差點(diǎn)沒回來的路：

前端點(diǎn)擊下載，發(fā)送post請(qǐng)求A給node

由node獲取參數(shù)向Java端發(fā)送post請(qǐng)求B把文件先下載到node本地(Java返回的記為responseA)并用responseB返回前端文件地址和文件名

前端獲取到responseB后拼接成get請(qǐng)求模擬a標(biāo)簽點(diǎn)擊去下載node中的文件

下載完成后再將node端對(duì)應(yīng)文件刪除。

寫到這里自己都忍不住想錘自己，給自己挖坑不說，這樣來回請(qǐng)求下載，流量double，真的是敗家。

angular前端訪問node跨域設(shè)置

在前端項(xiàng)目根目錄下新建proxy.conf.json文件,配置接口轉(zhuǎn)發(fā)

{
    "/api": {
        "target" : "http://localhost:3000"http://server端port
    }
}

保存后，配置package.json文件里start命令如下，保存后重新運(yùn)行就好

"start": "ng serve --proxy-config proxy.conf.json",

node如何發(fā)送get/post請(qǐng)求

stream、buffer的概念：文章一 文章二

前端GET下載的三種方式

直接將拼接好的GET請(qǐng)求url賦值給a標(biāo)簽，模擬點(diǎn)擊

先獲取數(shù)據(jù)流存進(jìn)blob對(duì)象，a.href = window.URL.createObjectURL(blob)

每次調(diào)用createObjectUR的時(shí)候,一個(gè)新的URL對(duì)象就被創(chuàng)建了.即使你已經(jīng)為同一個(gè)文件創(chuàng)建過一個(gè)URL. 如果你不再需要這個(gè)對(duì)象,要釋放它,需要使用URL.revokeObjectURL()方法. 當(dāng)頁面被關(guān)閉,瀏覽器會(huì)自動(dòng)釋放它,但是為了最佳性能和內(nèi)存使用,當(dāng)確保不再用得到它的時(shí)候,就應(yīng)該釋放它.

新建一個(gè)隱藏的iframe，src設(shè)置為如上一步的url即可

前端如何接收文件流并下載

原生xhr請(qǐng)求寫法

var xhr = new XMLHttpRequest();    
    xhr.open("get", url, true);
    xhr.responseType = "blob";
    xhr.onload = function() {
        if (this.status == 200) {
            var blob = this.response;
            var img = document.createElement("img");
            img.onload = function(e) {
              window.URL.revokeObjectURL(img.src); 
            };
            img.src = window.URL.createObjectURL(blob);
　　　　　　　$("#imgcontainer").html(img);
 } } xhr.send();

axios請(qǐng)求寫法

axios.post("/api/download_reports",msgArr,{
    responseType:"blob",
    onDownloadProgress (a){
        //監(jiān)聽下載進(jìn)度
        if(a.lengthComputable){
            let percent = (a.loaded*100/a.total).toFixed(2)
            console.log(percent)
            $("#percent").html(tempLoaded)
        }
    }
})
.then(response => {
    console.log(response)
    if(response.status == 200){
        const blob = new Blob([response.data],{type: "application/octet-stream"});
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = baseName+".zip";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
    }
})
.catch(error => {
    console.log(error)
})

前端如何獲取下載進(jìn)度，并進(jìn)一步完成進(jìn)度條設(shè)置

axios.post("/喵",postData, {
    onUploadProgress (a){
    //上傳進(jìn)度同理
        console.log(a)
    },
    onDownloadProgress (a){
    //控制臺(tái)輸出后，可以發(fā)現(xiàn)我們能夠通過a.loaded*100/a.total來獲得下載進(jìn)度
    //但需注意的是如果node端的responseB沒有設(shè)置"Content-Length"即二進(jìn)制流size的話
    //axios.post此時(shí)獲取到的下載進(jìn)度事件對(duì)象a里lengthComputable為false，進(jìn)而a.total=0
    //進(jìn)而無法獲取百分比進(jìn)度
        console.log(a)
    }
})

前端POST下載的兩種方式

這個(gè)沒有什么好說的，唯一可能要注意的就是表單里input傳參的時(shí)候，如果參數(shù)比較多，可以用JSON.stringify()轉(zhuǎn)換，只向后端發(fā)送一個(gè)字符串就好

以上就是自己對(duì)node實(shí)現(xiàn)文件前端下載的一些理解，如有不妥歡迎交流指正~