JS使用技巧-如何解决谷歌浏览器下载图片、PDF文档时只打开不下载的问题？

最新推荐文章于 2024-04-07 17:25:31 发布

原创最新推荐文章于 2024-04-07 17:25:31 发布 · 4.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #前端下载文件 #js字节流

JavaScript 同时被 2 个专栏收录

4 篇文章

订阅专栏

前端技术

2 篇文章

订阅专栏

本文介绍了一种解决谷歌浏览器自动打开而非下载图片和PDF文件的方法。通过使用JS获取下载流，生成本地下载链接并触发下载事件，实现直接下载而非在新标签页打开。

问题描述：

页面下载跨域的图片、pdf文件，浏览器总是自动打开，并且在下载列表里面不显示。

如何解决谷歌浏览器下载图片、PDF文档时只打开不下载的问题？如何变成直接下载？

解决方法：

使用js获取下载流，重新生成本地下载链接，再触发下载事件，代码如下：

function getFile(url,fileName){
	var httpRequest = new XMLHttpRequest();
	//指定响应类型，这决定了浏览器对返回内容的解析方式，设置为空或者text会作为字符解析、json会作为json解析，blob和arraybuffer会作为字节流解析
	httpRequest.responseType ='arraybuffer';
	httpRequest.open('GET', url, true);
	httpRequest.onload  = function () {
		if (httpRequest.readyState == 4 && httpRequest.status == 200) {
			//只有responseType为空或者text，才会使用responseText获取内容，其他情况                        httpRequest.response就是你需要的不含http头的返回内容
			var content = httpRequest.response;
		    var elink = document.createElement('a');
		    elink.download = fileName;
		    elink.style.display = 'none';
		    var blob = new Blob([content]);
			//创建指向内存中字节流的链接
		    elink.href = URL.createObjectURL(blob);
		    document.body.appendChild(elink);
	        elink.click();
		    document.body.removeChild(elink);
		}
	};
	httpRequest.send();
}

亲测可用，在谷歌浏览器点击图片和pdf，就可以显示下载内容，而不是在新tab页打开了