强制浏览器点击下载图像文件


100

我需要浏览器来下载图像文件,就像在单击Excel工作表时一样。

有没有办法仅使用客户端编程来做到这一点?

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-1.10.2.js">
        $(document).ready(function () {
            $("*").click(function () {
                $("p").hide();
            });
        });
        </script>
    </head>

    <script type="text/javascript">
        document.onclick = function (e) {
            e = e || window.event;
            var element = e.target || e.srcElement;
            if (element.innerHTML == "Image") {
                //someFunction(element.href);
                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, adress) {
            if (confirm('you wanna save this image?')) {
                window.win = open(adress);
                //response.redirect("~/testpage.html");
                setTimeout('win.document.execCommand("SaveAs")', 100);
                setTimeout('win.close()', 500);
            }
        }
    </script>

    <body>
        <form id="form1" runat="server">
            <div>
                <p>
                    <a href="http://localhost:55298/SaveImage/demo/Sample2.xlsx" target="_blank">Excel</a><br />
                    <a href="http://localhost:55298/SaveImage/demo/abc.jpg" id="abc">Image</a>
                </p>
            </div>
        </form>
    </body>
</html>

在下载Excel工作表的情况下该如何工作(浏览器会做什么)?


7
download属性。
森那维达斯

6
确保文件下载的最佳方法是在服务器端设置内容配置,大多数客户端解决方案都不那么可靠。
adeneo


有一个类似的问题已为您解答: stackoverflow.com/a/6799284/1948211
dschu 2013年

Karl-Andre Gagnon:请仔细检查它。[我没有为HTML 5加上标签,因为我不想使用它],并且没有接触服务器
Amit

Answers:


172

使用HTML5,您可以将属性“下载”添加到链接中。

<a href="https://stackoverflow.com/path/to/image.png" download>

然后,兼容的浏览器将提示您下载具有相同文件名的图像(在本示例中为image.png)。

如果您为此属性指定一个值,那么它将成为新的文件名:

<a href="https://stackoverflow.com/path/to/image.png" download="AwesomeImage.png">

更新:从2018年春季开始,跨域hrefs不再可行。因此,如果要<a href="https://i.imgur.com/IskAzqA.jpg" download>在imgur.com以外的域上创建,它将无法按预期工作。Chrome弃用和移除公告


理查德·帕纳比王:使用HTML 5的属性是可以做到的,但我需要做没有使用HTML5或任何服务器端工具(如果是有可能这样做)感谢助理:)
阿米特

2
目前尚不完全支持所有浏览器,但是如果您不关心IE或Safari,这是一个很好的解决方案。caniuse.com/#feat=download
stacigh 2014年

感谢您提供HTML5解决方案。如何仍然允许“另存为”,让我在保存之前输入文件名?
teleman,2015年

我不能控制该文件的下载位置吗?它只是下载直接下载文件夹。我希望它使用html文件的本地路径。
Arjun Chiddarwar '16

1
@ArjunChiddarwar不,这会打开安全漏洞(想象有人将恶意文件直接保存到Windows文件夹中)。下载路径基于浏览器设置-例如,默认情况下,Chrome将下载到您的下载文件夹中。
理查德·帕纳比·金

96

通过在文档的末尾附加一个链接,我也设法使它在Chrome和Firefox中也能正常工作。

var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

2
对于Java到处都是的Web应用程序,这实际上是一个非常好的解决方案。不过,只能在Google Chrome(在我的测试设置中)下工作。
Pavel

有什么想法可以测试兼容性吗?我想使用此技术,但还需要支持其他浏览器,因此在不支持此功能时,需要提供一种替代方法(例如在新窗口中打开PDF或下载链接)。有人有运气吗?
alexrussell 2014年

13
很好的解决方案,谢谢!请注意,如果您忽略document.body.appendChild(link)它,将无法在Firefox中使用。这也是很好的与删除创建的元素document.body.removeChild(link);link.click()
AKN

8
最好的解决方案。为了避免在DOM中使用垃圾setTimeout( function () { link.parentNode.removeChild( link ); },10 );
邮件

1
由于该问题询问了如何在JAVASCRIPT中进行操作,因此应该选择“谢谢”作为答案。
codehelp4 18/09/23

33

Leeroy和Richard Parnaby-King:

更新:从2018年春季开始,跨域href不再可行。因此,如果要在imgur.com以外的域上创建,它将无法按预期工作。Chrome弃用和移除公告

function forceDownload(url, fileName){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
    }
    xhr.send();
}

2
图片下载但未打开,因为它被说明为“图片已损坏”
picacode

19

更新2018年春季

<a href="/path/to/image.jpg" download="FileName.jpg">

尽管仍然支持此功能,但从2018年2月开始,Chrome禁用了跨域下载此功能,这意味着仅在文件位于相同域名时才有效。

在Chrome的新更新禁止跨域下载后,我想出了一种解决跨域图像下载的解决方法。您可以将其修改为适合您需要的功能。如果需要的话,您也许可以通过更多研究获得图像mime类型(jpeg,png,gif等)。也许还有一种方法可以对视频进行类似的操作。希望这对某人有帮助!

Leeroy和Richard Parnaby-King:

更新:从2018年春季开始,跨域href不再可行。因此,如果要在imgur.com以外的域上创建,它将无法按预期工作。Chrome弃用和移除公告

var image = new Image();
image.crossOrigin = "anonymous";
image.src = "https://is3-ssl.mzstatic.com/image/thumb/Music62/v4/4b/f6/a2/4bf6a267-5a59-be4f-6947-d803849c6a7d/source/200x200bb.jpg";
// get file name - you might need to modify this if your image url doesn't contain a file extension otherwise you can set the file name manually
var fileName = image.src.split(/(\\|\/)/g).pop();
image.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
    canvas.getContext('2d').drawImage(this, 0, 0);
    var blob;
    // ... get as Data URI
    if (image.src.indexOf(".jpg") > -1) {
    blob = canvas.toDataURL("image/jpeg");
    } else if (image.src.indexOf(".png") > -1) {
    blob = canvas.toDataURL("image/png");
    } else if (image.src.indexOf(".gif") > -1) {
    blob = canvas.toDataURL("image/gif");
    } else {
    blob = canvas.toDataURL("image/png");
    }
    $("body").html("<b>Click image to download.</b><br><a download='" + fileName + "' href='" + blob + "'><img src='" + blob + "'/></a>");
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


看起来这段代码将图像解码为浏览器内存中的像素缓冲区,然后将其重新编码为jpeg / png / gif,然后将其封装到data-uri中,然后希望将其存储在本地。如果是这样,则意味着图像文件中的所有元数据都将丢失。同样,重新编码JPEG会损失一些质量,并且质量/字节数比会变差。不过,很高兴知道。感谢分享。
StéphaneGourichon

14

使用Promise和async / await的更现代的方法:

toDataURL(url) {
    return fetch(url).then((response) => {
            return response.blob();
        }).then(blob => {
            return URL.createObjectURL(blob);
        });
}

然后

async download() {
        const a = document.createElement("a");
        a.href = await toDataURL("https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png");
        a.download = "myImage.png";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
}

在此处查找文档:https : //developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch


13
var pom = document.createElement('a');
pom.setAttribute('href', 'data:application/octet-stream,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);     

5
野生动物园浏览器不支持下载属性
Pranav Labhe

11

这是解决您问题的一般方法。但是文件扩展名应与您的编码匹配,这是非常重要的一部分。当然,downlowadImage函数的content参数应该是图像的base64编码字符串。

const clearUrl = url => url.replace(/^data:image\/\w+;base64,/, '');

const downloadImage = (name, content, type) => {
  var link = document.createElement('a');
  link.style = 'position: fixed; left -10000px;';
  link.href = `data:application/octet-stream;base64,${encodeURIComponent(content)}`;
  link.download = /\.\w+/.test(name) ? name : `${name}.${type}`;

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

['png', 'jpg', 'gif'].forEach(type => {
  var download = document.querySelector(`#${type}`);
  download.addEventListener('click', function() {
    var img = document.querySelector('#img');

    downloadImage('myImage', clearUrl(img.src), type);
  });
});
a gif image: <image id="img" src="data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtFiF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P+hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw==" />


<button id="png">Download PNG</button>
<button id="jpg">Download JPG</button>
<button id="gif">Download GIF</button>


3
请简短说明添加到您的答案,为了使相关谁问它的人
年龄

1
link.href ='data:application / octet-stream,'+ encodeURIComponent(address)这会损坏文件,因此无法打开,canu建议为什么这样做
OM Eternity

是的,这个答案应该是最好的答案!对我而言,缺少的部分是“ cleanUrl”,它会生成格式错误的数据并破坏文件。
Iulian Pinzaru

3

在2020年,我使用Blob制作图像的本地副本,该浏览器将作为文件下载。您可以在此站点上对其进行测试。

在此处输入图片说明

(function(global) {
  const next = () => document.querySelector('.search-pagination__button-text').click();
  const uuid = () => Math.random().toString(36).substring(7);
  const toBlob = (src) => new Promise((res) => {
    const img = document.createElement('img');
    const c = document.createElement("canvas");
    const ctx = c.getContext("2d");
    img.onload = ({target}) => {
      c.width = target.naturalWidth;
      c.height = target.naturalHeight;
      ctx.drawImage(target, 0, 0);
      c.toBlob((b) => res(b), "image/jpeg", 0.75);
    };
    img.crossOrigin = "";
    img.src = src;
  });
  const save = (blob, name = 'image.png') => {
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.target = '_blank';
    a.download = name;
    a.click();
  };
  global.download = () => document.querySelectorAll('.search-content__gallery-results figure > img[src]').forEach(async ({src}) => save(await toBlob(src), `${uuid()}.png`));
  global.next = () => next();
})(window);

看起来该代码将图像解码为浏览器内存中的像素(画布)缓冲区,然后将其重新编码为jpeg / png / gif,然后将其封装到data-uri中,然后希望将其存储在本地。如果是这样,则意味着图像文件中的所有元数据都将丢失。同样,重新编码JPEG会损失一些质量,并且质量/字节数比会变差。不过,很高兴知道。感谢分享。
StéphaneGourichon

2

试试这个:

<a class="button" href="http://www.glamquotes.com/wp-content/uploads/2011/11/smile.jpg" download="smile.jpg">Download image</a>

0
<html>
<head>
<script type="text/javascript">
function prepHref(linkElement) {
    var myDiv = document.getElementById('Div_contain_image');
    var myImage = myDiv.children[0];
    linkElement.href = myImage.src;
}
</script>
</head>
<body>
<div id="Div_contain_image"><img src="YourImage.jpg" alt='MyImage'></div>
<a href="#" onclick="prepHref(this)" download>Click here to download image</a>
</body>
</html>

0

您可以使用锚标记直接下载此文件,而无需太多代码。
复制代码段并粘贴到文本编辑器中,然后尝试...!

<html>
<head>
</head>
<body>
   <div>
     <img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg" width="200" height="200">
      <a href="#" download="https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg"> Download Image </a>
   </div>
</body>
</html>


2
请添加更多详细信息,例如可以在此处使用此代码的地方。
Maciej S.

-2

使用.click()函数和标记怎么办?

(压缩版)

<a id="downloadtag" href="examplefolder/testfile.txt" hidden download></a>

<button onclick="document.getElementById('downloadtag').click()">Download</button>

现在您可以使用js触发它。作为其他示例,它也没有打开图像和文本文件!

(js功能版本)

function download(){
document.getElementById('downloadtag').click();
}
<!-- HTML -->
<button onclick="download()">Download</button>
<a id="downloadtag" href="coolimages/awsome.png" hidden download></a>


-5

我找到

<a href="link/to/My_Image_File.jpeg" download>Download Image File</a>

没有为我工作。我不知道为什么。

我发现您可以?download=true在链接末尾包含一个参数来强制下载。我想我注意到Google云端硬盘正在使用这种技术。

在您的链接中,?download=true在href的末尾添加。

您也可以使用此技术同时设置文件名。

在您的链接中,?download=true&filename=My_Image_File.jpeg在href的末尾添加。


2
将?download = true传递给Google云端硬盘,以告知其服务器发送正确的标头以下载图像。除非以这种方式专门设置,否则它无法在任何其他环境中使用。
muncherelli

-15

您无需编写js即可,只需使用:

<a href="path_to/image.jpg" alt="something">Download image</a>

浏览器本身将自动下载图像。

如果由于某种原因它不起作用,请添加下载属性。使用此属性,可以为可下载文件设置名称:

<a href="path_to/image.jpg" download="myImage">Download image</a>

指向图像的链接只会在同一窗口中打开图像,除非您的浏览器配置不同。download并非所有浏览器都支持该属性。
由Adrian设计,2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.