js 下载文件的两种方式Blob和a.download

最新推荐文章于 2026-05-12 12:39:28 发布

原创最新推荐文章于 2026-05-12 12:39:28 发布 · 6.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍两种JavaScript实现文件下载的方法：利用HTML5的Blob对象和a标签的download属性，以及通过发送请求获取二进制流并生成文件进行下载。这两种方式为前端开发者提供了在浏览器中直接下载文件的解决方案。

直接通过a标签的href和click去点击下载文档

this.downloadUrl = "api/download";
<a onClick={this.downloadFile} download="template" href={this.downloadUrl}></a>

通过请求去获取二进制流，然后前端生成文档下载下来

downloadFile(url , name , suffix = 'pdf' , headers = {} , param = {}){
	let paramAll = Object.assign({_cache:Date.now()} , param);
	axios.get(url , {
		headers,
		responseType:'blob', // important
		params:paramsAll
	}).then((response)=>{
		const url = window.URL.createObjectURL(new Blob([response.data]));
		const link = document.createElement('a');
		link.href = url;
		link.setAttribute('download',`${name}.${suffix}`);
		document.body.appendChild(link);
		link.click();
	})
}