成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

筆記-js異步下載文件

WelliJhon / 1115人閱讀

摘要：類型處理正常下載時(shí)直接返回響應(yīng)數(shù)據(jù)請(qǐng)求出錯(cuò)時(shí)，接口返回的內(nèi)容是，于是將中的內(nèi)容取出中的內(nèi)容頁面自動(dòng)開始下載也可以讓后端設(shè)置文件名，通過返回參考博客

之前因?yàn)閼?，異步?qǐng)求的下載都是直接寫在a標(biāo)簽里，請(qǐng)求權(quán)限讓后端做特殊處理判斷，就像這樣
點(diǎn)擊下載
現(xiàn)在覺得這樣處理不太好，一個(gè)是后端權(quán)限要做多帶帶判斷，另一個(gè)是如果調(diào)用接口報(bào)錯(cuò)就沒辦法處理了，研究之后修改了一下，項(xiàng)目用了axios這個(gè)lib，所以是針對(duì)axios的request和response做了修改，不過對(duì)于原生寫法和其他庫，原理是一樣的
1.將請(qǐng)求的responseType設(shè)置為blob 
function exportData(p) {
    return axios({
        url: "/data/export",
        method: "get",
        params: p,
        responseType: "blob"
    });
}
2.對(duì)response進(jìn)行處理

因?yàn)轫?xiàng)目里用了response攔截器來處理響應(yīng)，所以我在攔截器里做了處理，也可以多帶帶處理。

axios.interceptors.response.use(
    response=> {
        // ...
        // Blob類型處理
        let checkType = response.config.responseType;
        if(checkType === "blob" && res.type === "application/octet-stream") { // 正常下載時(shí)直接返回響應(yīng)數(shù)據(jù)
            return response.data
        } else if(checkType === "blob" && res.type === "application/json") { // 請(qǐng)求出錯(cuò)時(shí)，接口返回的內(nèi)容是json，于是將blob中的內(nèi)容取出
            let reader = new FileReader();
            reader.onload = function(event){
                let content = reader.result; // blob中的內(nèi)容
                Message({
                    message: JSON.parse(content).desc,
                    type: "error",
                    duration: 5 * 1000
                })
            };
            reader.readAsText(response.data);
            return Promise.reject("error")
        }
        
        // ...
    },
    error => {
        // ...
    }
)
3.html頁面自動(dòng)開始下載 
exportData(para).then(res => {
    let content = res;
    let aTag = document.createElement("a");
    let blob = new Blob([content]);
    aTag.download = "Datas.xlsx"; // 也可以讓后端設(shè)置文件名，通過headers返回
    aTag.href = URL.createObjectURL(blob);
    aTag.click();
    URL.revokeObjectURL(blob);
}).finally(() => {

})
參考博客：https://www.cnblogs.com/coder...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105257.html

相關(guān)文章

  • 日常筆記

    摘要：零延遲零延遲并不是意味著回調(diào)函數(shù)立刻執(zhí)行。異步編程的中方法包括回調(diào)函數(shù)事件監(jiān)聽采用事件驅(qū)動(dòng)模式。執(zhí)行完成后，立即觸發(fā)事件，從而開始執(zhí)行。所謂對(duì)象，就是代表了未來某個(gè)將要發(fā)生的事件通常是一個(gè)異步操作。 JavaScript單線程與瀏覽器多線程 Javascript是單線程的：因?yàn)镴S運(yùn)行在瀏覽器中，是單線程的，每個(gè)window一個(gè)JS線程。作為瀏覽器腳本語言，JavaScript的主要...

    myshell 評(píng)論0 收藏0

  • 《javascript高級(jí)程序設(shè)計(jì)》筆記：script元素屬性

    摘要：高級(jí)程序設(shè)計(jì)摘錄可選。表示通過屬性指定的代碼的字符集。這個(gè)屬性并不是必需的，如果沒有指定這個(gè)屬性，則其默認(rèn)值仍為。規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行，因此第一個(gè)延遲腳本會(huì)先于第二個(gè)延遲腳本執(zhí)行，而這兩個(gè)腳本會(huì)先于事件執(zhí)行。 《javascript高級(jí)程序設(shè)計(jì)》摘錄： async:可選。表示應(yīng)該立即下載腳本，但不應(yīng)妨礙頁面中的其他操作，比如下載其他資源或 等待加載其他腳本。只對(duì)外部...

    since1986 評(píng)論0 收藏0

  • JavaScript 筆記一 script 標(biāo)簽

    摘要：一標(biāo)簽中得屬性的使用已經(jīng)廢棄。當(dāng)瀏覽器遇到這個(gè)字符串是會(huì)認(rèn)為當(dāng)前的腳本已經(jīng)執(zhí)行結(jié)束，即使是字符串也需要這樣執(zhí)行，如果這個(gè)確實(shí)需要被做為字符串處理，那必須進(jìn)行轉(zhuǎn)義就像這樣。二標(biāo)簽應(yīng)該放到頁面最底部嗎一定要放在的最底部嗎 一、script 標(biāo)簽中得屬性的使用 1、language 已經(jīng)廢棄。 2、 type 對(duì)于普通的的javascript類型的文件不需要添加, 因?yàn)椴惶砑幽J(rèn)為text/...

    hiYoHoo 評(píng)論0 收藏0

  • 《高性能JavaScript》（讀書筆記）

    摘要：加載的模塊會(huì)以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊。異步加載，和，瀏覽器不會(huì)失去響應(yīng)它指定的回調(diào)函數(shù)，只有前面的模塊都加載成功后，才會(huì)運(yùn)行，解決了依賴性的問題。插件，可以讓回調(diào)函數(shù)在頁面結(jié)構(gòu)加載完成后再運(yùn)行。 這次主要是對(duì)《高性能JavaScript》一書的讀書筆記，記錄下自己之前沒有注意到或者需要引起重視的地方 第一章 加載和執(zhí)行 js代碼在執(zhí)行過程中會(huì)阻塞瀏覽...

    moven_j 評(píng)論0 收藏0

  • 【讀書筆記】《高性能JavaScript》

    摘要：性能訪問字面量和局部變量的速度是最快的，訪問數(shù)組和對(duì)象成員相對(duì)較慢變量標(biāo)識(shí)符解析過程搜索執(zhí)行環(huán)境的作用域鏈，查找同名標(biāo)識(shí)符。建議將全局變量存儲(chǔ)到局部變量，加快讀寫速度。優(yōu)化建議將常用的跨作用域變量存儲(chǔ)到局部變量，然后直接訪問局部變量。 缺陷 這本書是2010年出版的，這本書談性能是有時(shí)效性的，現(xiàn)在馬上就2018年了，這幾年前端發(fā)展的速度是飛快的，書里面還有一些內(nèi)容考慮IE6、7、8的東...

    chengjianhua 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<