纯前端模板文件下载如何精确控制下载的文件名字

在写项目的时候，遇到了一个需要把给定的文件放到页面中，然后用户点击下载按钮将这个文件下载下来，我将其存入了云服务之中(这个云服务是不会清空的，内存又不值几个钱)，但是当我下载的时候，下载的文件名是存到服务器地址的路径名，出现了这个问题。 然后我用a标签的dowmLoad属性指定文件下载名字，依然没有效果。

从网上一搜，原来是服务器发送的请求头里控制了这个属性，让浏览器觉得自己设置的没有服务器给的靠谱。

 方法！！！！

这个时候，我们可以通过Blob对象和URL.createObjectURL()来实现，就是先将他搞过来成为前端的数据，然后前端用这个数据生成一个文件，最后给他赋予我们想给他的名字，就成功的实现了。

const download = () => {
	const fileUrl = "https://***************************************/1700023798306.docx";
	const fileName = "测试名字.docx";
 
	fetch(fileUrl)
		.then(response => response.blob())
		.then(blob => {
			// 创建一个虚拟的下载链接
			const link = document.createElement("a");
			link.href = URL.createObjectURL(blob);
 
			// 设置下载属性，并指定文件名
			link.download = fileName;
 
			// 将链接添加到文档中，并触发点击事件
			document.body.appendChild(link);
			link.click();
 
			// 移除链接
			document.body.removeChild(link);
		});
};

 

划重点

这个方法有点新！！可能旧版本的浏览器兼容性没有那么好。