Question

我有一个图片缩略图，当有人点击它时，它应该将其下载到您的计算机而不是在新标签/窗口中打开。这可能吗？我不想使用HTML5属性HTML: <a class="dl" href="//placehold.it/650x350"> <img src="//placehold.it/150x150"> <span>Click to Download</span> </a>来完成此任务。想知道是否可能w / jQuery。

angular.module('another-module', [])
            .directive('anotherModuleOuter', function () {
                return {
                    scope: {},
                    controller: function () {
                        console.log('another-module-outer - controller');
                    },
                    link: function () {
                        console.log('another-module-outer - link');
                    },
                    template: '<div>another-module-outer <div another-module-inner></div></div>'
                }
            })
            .directive('anotherModuleInner', function () {
                return {
                    scope: {},
                    controller: function () {
                        console.log('another-module-inner - controller');
                    },
                    link: function () {
                        console.log('another-module-inner - link');
                    },
                    template: '<div>another-module-inner</div>'
                }
            });

Answer 1

最佳做法是使用download标记内的a属性。但是，可以使用JavaScript或jQuery设置属性。

在jQuery中，我们可以使用prop或attr方法，它们既可以作为setter，也可以作为getter。要设置属性，我们将字符串作为第二个参数名称的一部分传递。

jQuery示例

$(document).ready(function() {
    $("img").parent().prop("download", "filename.jpg");
});

https://jsfiddle.net/3u5shchm/

在JavaScript中，我们使用setAttribute函数。

document.getElementsByClassName("dl")[0].setAttribute("download", filename.jpg");

小提琴链接

https://jsfiddle.net/Lff6erj1/

Answer 2

一种解决方案是使用“download”。

示例：<a src="xyz" download>Click to Download</a>：

点击图片下载，而不是打开新标签？

2 个答案: