Question

我有一张我要下载的图片。

我尝试使用iframe执行此操作但它无法正常工作。我尝试使用HTML5“下载”属性的链接，它在chrome上工作，但在Firefox上它打开一个新窗口。

我的代码：

var href = $("#largeImageContaier img").attr("src")

$("#dlpic").attr("href", href);
document.getElementById("dlpic").click()

HTML：

<a href="" id="dlpic" download="alternate-filename.png">

我想将图像直接下载到浏览器，就像上面的代码在chrome中一样，但我如何让它对其他浏览器执行相同操作，在本例中为firefox

Answer 1

如果你正在使用FireFox，you should be able to use the download attribute

尝试将href设置为实际值。在我这样做之后，它在Chrome和FireFox中都有效。

<a href="resource.html" download="The-name-I-want-to-use.html">Download</a>

MDN说download用于设置您希望资源在下载时拥有的名称。您仍需提供href。

根据MDN，有关download的另一件事需要注意：

此属性仅适用于具有相同来源的资源的链接。

如果您想在不使用任何库的情况下检查download支持，可以使用：

var dlAttrSupported = (function () {
    return !!("download" in document.createElement("a"));
}());

Answer 2

来自http://webdesign.tutsplus.com/tutorials/quick-tip-using-the-html5-download-attribute--cms-23880

您可以使用Modernizr检测浏览器是否支持它，也可以在链接下显示说明，告诉用户右键单击并另存为。＆＃39;

if ( ! Modernizr.adownload ) {
    var $link = $('a');

    $link.each(function() {
        var $download = $(this).attr('download');

        if (typeof $download !== typeof undefined && $download !== false) {
          var $el = $('<div>').addClass('download-instruction').text('Right-click and select "Download Linked File"');
          $el.insertAfter($(this));
        }

    });
}

以下是哪些浏览器支持HTML5下载属性的列表：http://caniuse.com/#search=download

使用javascript / jquery跨浏览器下载图像

2 个答案: