前端下载文件(blob流文件下载及修改下载文件名称)

最新推荐文章于 2025-10-09 10:33:07 发布

原创最新推荐文章于 2025-10-09 10:33:07 发布 · 3.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #html5

本文介绍了一种前端处理blob流文件并实现文件下载的方法。通过XMLHttpRequest请求获取blob数据，利用URL.createObjectURL将其转换为文件地址，并通过创建a标签完成下载。

项目中经常遇到文件下载需求，有时候后台返回的是一个blob流文件（就是看起来像是乱码的数据），这时就需要前端对文件进行处理，或展示，或下载。故这里简单实现一下blob流文件下载的方法。

function downloadFile() {
	// fileUrl使用后台提供的接口地址即可，这里测试使用本地图片，防止跨域
	let fileUrl = "./test.jpg";
	let xhr = new XMLHttpRequest();
	xhr.open("GET",fileUrl,true);
	xhr.responseType = "blob";
	xhr.send();
	xhr.onload = function () {
		// 获取后台返回的blob流
		let fileBlob = xhr.response;
		// 将blob流 转为 文件地址
		let createFileUrl = window.URL.createObjectURL(fileBlob);
		// 通过创建a标签下载文件
		let aTag = document.createElement("a");
		aTag.setAttribute("href",createFileUrl);
		// 文件名可以自定义后缀(是否带文件类型，例如:xxx.txt 或者 xxx)
		aTag.setAttribute("download","文件名");
		aTag.click();
		// 释放创建的文件地址对象
		window.URL.revokeObjectURL(createFileUrl);
	}
}
downloadFile()