天天看点

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

问题描述:

页面下载跨域的图片、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页打开了

继续阅读