Question

我正在使用javascript编写Firefox的扩展程序。基本上，当鼠标悬停在图像的缩略图上时（点击时会将您带到包含完整图像的网页），扩展程序会找到完整图像的URL并尝试通过按键进行下载。（＆＃34; D＆＃34;在这种情况下。）我正在使用的文件通常是.jpgs和.pngs，但.swfs和.mp3s也可能存在。在这一点上，我只是想让前两个文件类型工作。

我现在使用的代码只是

function ExtendedDownload(image_src) {
    var a = document.createElement('a');
    document.body.appendChild(a);
    a.download = image_src.split('/').pop().split('?')[0];
    a.href = image_src;
    a.click();
}

image_src是图片的网址。
a.download是从完整网址解析的图片的文件名。

早些时候在javascript文件中，当它看到光标悬停有效缩略图时，它会等待按键。这部分工作得很好。下载是我遇到的麻烦。

加载到chrome时，此扩展程序可以完美地按预期工作。但是在Firefox（v49.0.2）中，它只显示图像（类似于粘贴地址栏中的图像链接并按下回车键。）这不是所需的效果。

我测试的一个解决方案是通过javascript将图像转换为base64并尝试下载，这在理论上有效，并且我已经测试过它将是base64转换为.pngs ..然而，文件我是＆＃39; m试图将结果下载到大小超过兆字节的base64字符串中，并将浏览器挂起，这样就不会有效。

我在stackexchange上针对类似问题遇到的每一个解决方案都让我回到了这个位置，然而，＃34;下载＆＃34;图像只需在浏览器中打开即可。

任何建议都将不胜感激。

编辑：我遇到的问题肯定是基于以下事实：我使用此扩展程序的网页和图片所在的网页位于不同的域上。 @Mayank Pandeyz的解决方案使我确信这一点，因为当我尝试下载和图像在与页面本身相同的域上时，它按预期工作。对于像这样的事情，我的潜力是什么？

Answer 1

试试这个：

var a = document.createElement('a');
a.href = "/favicon.png";
a.download = "favicon.png";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

Demo Fiddle

Answer 2

你可以在jquery中这样做。

您可以选择是否下载

   <a href="yourPath" class="download">download</a>


$('.download').click(function(){
           var url = $(this).attr('href');
           $(this).attr("target", "_blank");
            window.open(url,'Download');  
       });

这是一个小提琴：https://jsfiddle.net/s1ojfbrt/2/

Answer 3

您的服务器可以选择为图像提供以下响应标头：

Content-Type: application/octet-stream
Content-Disposition: attachment; filename="picture.png"

在这种情况下，浏览器将显示“另存为...”对话框。

您可以在服务器上安装特殊的url /脚本。

使用Javascript通过Firefox下载图像？

3 个答案: