---

通过链接下载

a标签

对于已知地址的目标文件，前端可以使用 a标签 来直接下载，使用a标签下载使用到两个属性

• download：下载文件名
• href：目标文件下载链接

<a href="xxx/xxx/a.xlsx" download="a.xlsx">点击下载图片</a>

下载方法

使用时给触发的div绑定事件

  const download = async () => {const url = 'https://xx.com/xx/xx/a.xlsx'const fileName = 'a.xls'let a = document.createElement("a");a.download = fileName;a.href = url;document.body.append(a); // 修复firefox中无法触发clicka.click();URL.revokeObjectURL(a.href);a.remove();}

注意

a标签的下载只能使用get请求，且无法在请求体中添加header信息

获取文件流

请求体配置

axios({url: 'https://xxx.com/xxx/xxx',method: 'get',responseType: 'blob',}).

请求方法可用post或者get，responseType一般需要设置为 blob 或者 arraybuffer

下载文件流

• 封装下载函数

export const downloadFileByBlob = (fileData, fileName, ext = 'xlsx') => {const blob = new Blob([fileData], {type: docMimeTypes[ext],});console.log('fileData---',fileData)console.log('blob---',blob)const objectUrl = window.URL.createObjectURL(blob);const link = document.createElement('a');link.href = objectUrl;link.setAttribute('download', fileName);document.body.appendChild(link);link.click();link.remove();window.URL.revokeObjectURL(objectUrl); // 文件下载后，释放blob对象
};

• 下载函数使用

	  const res = await downLoadFile(param)console.log('downLoadFile-->', res)downloadFileByBlob(res.data, '下载文件') // 数据流是个Blob对象

打印如下👇

总结

JavaScript下载文件

• 通过链接下载

• 获取文件流