JavaScript下载文件、音频、视频的方式

下载文件可以直接通过a标签的href属性直接下载，也可以通过Blob对象转换为文件流进行下载。如果要对大数据量或者需要分片下载、上传等操作，可以考虑Blob对象。

一、a标签下载文件

// 这是传统的下载方式
const downloadFileA = document.createElement('a')
document.body.append(downloadFileA)
downloadFileA.href=`https://xxx`
downloadFileA.download = '下载文件.csv'
downloadFileA.rel = 'noopener noreferrer'
downloadFileA.click()
document.body.removeChild(downloadFileA)

二、将文件转化为blob对象的二进制数据流下载

Blob对象是一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件

axios({
    method: 'get',
    url: `https:/xxx.com${url}`,
    // 必须显式指明响应类型是一个Blob对象，这样生成二进制的数据，才能通过window.URL.createObjectURL进行创建成功
    responseType: 'blob',
}).then((res) => {
    if (!res) {
        return
    }
    // 将lob对象转换为域名结合式的url
    let blobUrl = window.URL.createObjectURL(res.data)
    let link = document.createElement('a')
    document.body.appendChild(link)
    link.style.display = 'none'
    link.href = blobUrl
    // 设置a标签的下载属性，设置文件名及格式，后缀名最好让后端在数据格式中返回
    link.download = '下载文件.csv'
    // 自触发click事件
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(blobUrl);
})