首页 > web前端 > js教程 > 如何使用客户端编程强制浏览器下载图像?

如何使用客户端编程强制浏览器下载图像?

Patricia Arquette
发布: 2024-11-09 05:56:02
原创
233 人浏览过

How to Force Browser Downloads for Images Using Client-Side Programming?

使用客户端编程强制浏览器下载图像

背景

单击时Excel 工作表或其他可下载文件,浏览器通常会无缝启动下载过程。但是,需要专门针对图像文件复制此行为。

实现图像下载

单独使用客户端编程,可以实现图像下载,如下所示:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

document.onclick = function (e) {

    e = e || window.event;

    var element = e.target || e.srcElement;

    if (element.innerHTML == "Image") {

        var name = element.nameProp;

        var address = element.href;

        saveImageAs1(element.nameProp, element.href);

        return false; // Prevent default action and stop event propagation

    }

    else

        return true;

};

 

function saveImageAs1(name, address) {

    if (confirm('you wanna save this image?')) {

        window.win = open(address);

        setTimeout('win.document.execCommand("SaveAs")', 100);

        setTimeout('win.close()', 500);

    }

}

登录后复制

此代码拦截图像元素上的单击事件,并提示用户使用“另存为”对话框保存它

Excel 下载的情况

对于 Excel 下载,浏览器在内部处理下载过程。它们根据 MIME 类型识别文件类型,并触发适当的下载行为,无需任何额外的编程。

HTML5 'download' 属性

但是,较新的浏览器支持 的“下载”属性元素,它提供了更方便的方式来启动图像下载:

1

<a href="http://localhost:55298/SaveImage/demo/abc.jpg" download>Image</a>

登录后复制

此属性提示浏览器使用提供的文件名或原始文件名(如果未指定)下载图像。请注意,出于安全考虑,自 2018 年起不再支持使用此方法的跨源下载。

以上是如何使用客户端编程强制浏览器下载图像?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板