js download 图片被自动打开了
时间: 2023-09-05 16:01:58 浏览: 65
当使用js下载图片时,有时候会遇到图片被自动打开的情况。这是因为浏览器会根据图片的文件类型自动选择相应的操作。如果浏览器认为该文件类型可以在浏览器中直接显示(如常见的图片文件格式),那么它就会自动打开该图片。
要解决这个问题,可以考虑以下两种方法:
1. 使用正确的Content-Disposition头信息:在服务器端响应中,设置Content-Disposition头信息,将图片的显示方式设置为“附件”,而不是“内联”。这样浏览器就会将图片作为附件进行下载,而不是直接打开。具体实现方法如下:
```
response.setHeader("Content-Disposition", "attachment; filename=image.jpg");
```
2. 将图片文件的数据转换成Blob对象进行下载:可以使用js将图片的数据转换成Blob对象,然后使用URL.createObjectURL()方法生成下载链接,再使用a标签的download属性进行下载。具体实现方法如下:
```
var xhr = new XMLHttpRequest();
xhr.open('GET', 'image.jpg', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
var blob = this.response;
var link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'image.jpg';
link.click();
}
};
xhr.send();
```
通过以上两种方法,可以避免图片被自动打开,而实现图片的下载功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)