使用 javascript/jquery 跨浏览器下载图像 [重复]答案

【问题标题】：cross browser download image with javascript/jquery [duplicate]使用 javascript/jquery 跨浏览器下载图像 [重复]
【发布时间】：2016-05-20 01:33:50
【问题描述】：

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

我尝试使用 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

【问题讨论】：

只有部分浏览器支持download 属性。 caniuse.com/#feat=download
嘿......
在这种情况下，您的选择非常有限。 iframe 解决方案是“修复”此问题的正常方式，但由于浏览器知道如何呈现图像，因此无法正常工作。您可以让服务器返回具有浏览器不理解的 mime 类型的图像，但这可能比告诉用户右键单击另存为更糟糕（也更困难）。
这不会触发文件下载对话框，但对于图像，您可以使用<a href="resource.png" target="_blank"> 打开弹出窗口或其他内容。这样至少不会有页面移动。我认为该解决方案很糟糕，但它可能适合您的需求。
目前我有“target_blank”，但这太棒了。

标签： javascript jquery asp.net-mvc

【解决方案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"));
}());

【讨论】：

我的脚本代码设置了一个href m8。 "$("#dlpic").attr("href", href);" cloudinary 的网址
当您说“一个指向 cloudinary 的 url”时，那是在另一个域上吧？这很重要，因为download 仅适用于指向同源资源的链接。
那是另一个域是的。

【解决方案2】：

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

您可以使用 Modernizr 来检测浏览器是否支持它，或者在链接下显示说明以告诉用户“右键单击并另存为”。

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

【讨论】：

不是我真正想要的。 Modernizer 可能会授予我检测浏览器是否支持 html5“下载”的可能性，但它并没有给我想要的功能。没有crossrowser方式吗？我想指出，href 是指向另一个站点的 url，
如果浏览器不支持 HTML5 下载属性，那你就倒霉了。