筆記-js異步下載文件

WelliJhon 發布于2019-08-23 18:27 / 1107人閱讀

摘要：類型處理正常下載時直接返回響應數據請求出錯時，接口返回的內容是，于是將中的內容取出中的內容頁面自動開始下載也可以讓后端設置文件名，通過返回參考博客

之前因為懶，異步請求的下載都是直接寫在a標簽里，請求權限讓后端做特殊處理判斷，就像這樣

點擊下載

現在覺得這樣處理不太好，一個是后端權限要做多帶帶判斷，另一個是如果調用接口報錯就沒辦法處理了，研究之后修改了一下，項目用了axios這個lib，所以是針對axios的request和response做了修改，不過對于原生寫法和其他庫，原理是一樣的

1.將請求的responseType設置為blob

function exportData(p) {
    return axios({
        url: "/data/export",
        method: "get",
        params: p,
        responseType: "blob"
    });
}

2.對response進行處理

因為項目里用了response攔截器來處理響應，所以我在攔截器里做了處理，也可以多帶帶處理。

axios.interceptors.response.use(
    response=> {
        // ...
        // Blob類型處理
        let checkType = response.config.responseType;
        if(checkType === "blob" && res.type === "application/octet-stream") { // 正常下載時直接返回響應數據
            return response.data
        } else if(checkType === "blob" && res.type === "application/json") { // 請求出錯時，接口返回的內容是json，于是將blob中的內容取出
            let reader = new FileReader();
            reader.onload = function(event){
                let content = reader.result; // blob中的內容
                Message({
                    message: JSON.parse(content).desc,
                    type: "error",
                    duration: 5 * 1000
                })
            };
            reader.readAsText(response.data);
            return Promise.reject("error")
        }
        
        // ...
    },
    error => {
        // ...
    }
)

3.html頁面自動開始下載

exportData(para).then(res => {
    let content = res;
    let aTag = document.createElement("a");
    let blob = new Blob([content]);
    aTag.download = "Datas.xlsx"; // 也可以讓后端設置文件名，通過headers返回
    aTag.href = URL.createObjectURL(blob);
    aTag.click();
    URL.revokeObjectURL(blob);
}).finally(() => {

})

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

云服務器 GPU云服務器 js異步文件異步加載js文件 js讀語音文件下載 js下載服務器文件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105257.html

日常筆記

摘要：零延遲零延遲并不是意味著回調函數立刻執行。異步編程的中方法包括回調函數事件監聽采用事件驅動模式。執行完成后，立即觸發事件，從而開始執行。所謂對象，就是代表了未來某個將要發生的事件通常是一個異步操作。 JavaScript單線程與瀏覽器多線程 Javascript是單線程的：因為JS運行在瀏覽器中，是單線程的，每個window一個JS線程。作為瀏覽器腳本語言，JavaScript的主要...

myshell 2019-08-22 10:38 評論0 收藏0
《javascript高級程序設計》筆記：script元素屬性

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

since1986 2019-08-20 18:34 評論0 收藏0
JavaScript 筆記一 script 標簽

摘要：一標簽中得屬性的使用已經廢棄。當瀏覽器遇到這個字符串是會認為當前的腳本已經執行結束，即使是字符串也需要這樣執行，如果這個確實需要被做為字符串處理，那必須進行轉義就像這樣。二標簽應該放到頁面最底部嗎一定要放在的最底部嗎一、script 標簽中得屬性的使用 1、language 已經廢棄。 2、 type 對于普通的的javascript類型的文件不需要添加, 因為不添加默認為text/...

hiYoHoo 2019-08-22 18:43 評論0 收藏0
《高性能JavaScript》（讀書筆記）

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

moven_j 2019-08-21 17:58 評論0 收藏0
【讀書筆記】《高性能JavaScript》

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

chengjianhua 2019-08-22 13:51 評論0 收藏0