使用JavaScript進行文件下載

目錄

• 通過創建 a 標簽進行下載
• 跨域下載文件

通過創建 a 標簽進行下載

后端返回數據：

{
    "result": {
        "fileName":"xxxx.xls",
        "fileData":"data:application/vnd.ms-excel;base64,0M8R4KGxGuEAAAAAAAAAAAAAAAAAAAAAOwADAP7/CQAGAAAAAAAAAAAAAAABAAAAPgAAAAAA....."
    }
}

前端處理：

/* 模擬 a 標簽的點擊下載*/
let {result} = response
let {fileName, fileData} = result

let a = document.createElement("a")
a.href = fileData
a.download = fileName

document.body.appendChild(a)

a.click()
a.remove()

跨域下載文件

Fetch API 提供了一個 JavaScript接口，用於訪問和操縱HTTP管道的部分，例如請求和響應。它還提供了一個全局 fetch()方法，該方法提供了一種簡單，合理的方式來跨網絡異步獲取資源。

fetch(遠程文件URL).then(res => res.blob().then(blob => {
    var a = document.createElement('a');
    var url = window.URL.createObjectURL(blob);
    var filename = row.title;
    a.href = url;
    a.download = filename;
    a.click();
    window.URL.revokeObjectURL(url);
}))