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

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

背景

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

实现图像下载

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

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' 属性

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

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

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

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