使用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);
}))