【js】js根据url或数据下载文件到本地

最新推荐文章于 2025-10-26 10:21:55 发布

原创最新推荐文章于 2025-10-26 10:21:55 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

杂七杂八专栏收录该内容

85 篇文章

订阅专栏

这篇博客主要介绍了如何解决苹果浏览器无法通过`window.location.href`直接下载文件的问题。提供了一种前端解决方案，包括两种方法：一是直接使用后台返回的文件数据进行下载；二是后台仅返回URL时，通过XMLHttpRequest获取文件数据后再下载。此外，还分享了常见文件格式的相关链接。

以前都是直接用windows.location.href 然后标签添加个download就可以,

后来发现苹果浏览器这样不能下载，反而在浏览器中把文件直接给打开了。

解决方法如下

（1）如果是后台返回了文件的数据，则前台文件中直接引入这个js，然后直接调用下面的方法就可以了。js下载地址点这里，分别是数据，文件名，文件格式，常见文件格式看本文最后

download(data, strFileName, strMimeType);

（2）如果是后台只返回了一个url，那么也是先引用刚刚下载的js，然后用下面代码获取到data并下载。即

// 下载含有url的文件
function downloadUrlFile(url, fileName) {
	const url2 = url.replace(/\\/g, '/');
	const xhr = new XMLHttpRequest();
	xhr.open('GET', url2, true);
	xhr.responseType = 'blob';
	//如果希望文件名就是url斜杠最后的部分,则加上下面两行代码,fileName参数传url就行
	//var index = fileName .lastIndexOf("\/");
	//fileName  = fileName .substring(index + 1, fileName .length);
	// 为了避免大文件影响用户体验，建议加loading
	xhr.onload = () => {
		if (xhr.status === 200) {
			// 获取文件blob数据并保存
			download(xhr.response, fileName, "text/csv" );
		}
	};
	xhr.send();
}

（3）常见的文件格式我在其他博主的博文中看到了

https://blog.youkuaiyun.com/zhuyu19911016520/article/details/88714289