通过链接下载
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中无法触发click
a.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下载文件
-
通过链接下载文章来源：https://www.toymoban.com/news/detail-684345.html
-
获取文件流文章来源地址https://www.toymoban.com/news/detail-684345.html
到了这里，关于JavaScript下载excel文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
