Web前端下载文件的几种常见方式

1 标签or点击事件

标签下载

<a href="xxxxx">
或
<a href="xxxxx" download="xxxx">

href：文件的绝对/相对地址
download: 文件名（可省略，省略后浏览器自动识别源文件名）

Tip：

• 跨域情况下，不能下载浏览器可浏览的文件，例如图片。
• 兼容性问题，老的浏览器不支持。
• 不能进行鉴权。

通过点击事件下载

function download(url, fileName){
    const a = document.createElement('a')
    a.style.display = 'none'
    a.href = url
    a.download = fileName
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}

2 location.href 或 window.open

function download(url, fileName){
    location.href = url
}
或
function download(url, fileName){
    window.open(url)
}

优点

• 简单方便直接。

缺点

• 会出现 url 长度限制问题。
• 需要注意 url 编码问题。
• 浏览器可直接浏览的文件类型是不提供下载的，如 txt、png、jpg、gif 等。
• 不能添加 header，也就不能进行鉴权。
• 无法知道下载的进度。

3 通过表单

function download(url, fileName){
    // 创建表单
    const formEle = document.createElement('form')
    formEle.action = url
    formEle.method = 'get'
    formEle.style.display = 'none'
    // 创建 input，用于传参
    const formItem = document.createElement('input')
    formItem.value = fileName
    formItem.name = 'fileName'
    // 插入到页面中
    formEle.appendChild(formItem)
    document.body.appendChild(formEle)
    formEle.submit()
    document.body.removeChild(formEle)
}

优点

• 传统方式，兼容性好，不会出现URL长度限制问题。

缺点

• 无法知道下载的进度。
• 浏览器可直接浏览的文件类型是不提供下载的，如 txt、png、jpg、gif 等。

4 Blob 对象

进行下载的思路很简单：发请求获取二进制数据，转化为 Blob 对象，利用 URL.createObjectUrl 生成 url 地址，赋值在 a 标签的 href 属性上，结合 download 进行下载。

相关资料：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

4.1 请求时设置了 responseType = 'blob’

// reponse - 接口返回的二进制数据
// fileName - 文件名
const url = URL.createObjectURL(reponse)
const a = document.createElement('a')
a.style.display = 'none'
a.href = url
a.download = fileName
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(url)

4.2 请求时没有设置 responseType

// reponse - 接口返回的二进制数据
// fileName - 文件名
const blob = new Blob([response], {type: 'xxx'}) // type: 'blob'
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.style.display = 'none'
a.href = url
a.download = fileName
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(url)

优点

• 能下载浏览器可浏览的文件 。
• 可设置header，也就可添加鉴权信息。

缺点

• 兼容性问题，IE10以下不可用；Safari浏览器可以留意下使用情况。

5 DataURL

相关资料：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

请求时需要设置 responseType = 'blob’

// reponse - 接口返回的二进制数据
// fileName - 文件名
const fileReader = new FileReader()
fileReader.readAsDataURL(response)
fileReader.onload = function(){
    const a = document.createElement('a')
    a.style.display = 'none'
    a.href = this.result
    a.download = fileName
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}

优点

• 能下载浏览器可浏览的文件。
• 可设置header，也就可添加鉴权信息。

缺点

• 兼容性问题，IE10以下不可用。

参考文献

前端下载文件的5种方法的对比