Download images using HTML or JavaScript

I need to download images from the server. In the below HTML5 code 'Download 1' downloads the image successfully. But 'Download 2' is navigating to the image URL instead of downloading the image. The main difference between 'Download 1' and 'Download 2' is 'Download 2' has file extension as'.jpg' in the file name. I want 'Download 2' to download the image.

I need to download images with the file extension. Please help to resolve the issue. Thanks in advance!

<a id="download_image" href="" download>Download 1</a>
<a id="download_image" href=".jpg" download>Download 2</a>

I need to download images with the file extension. Please help to resolve the issue. Thanks in advance!

<a id="download_image" href="https://docs.google.com/uc?id=0B0jH18Lft7ypSmRjdWg1c082Y2M" download>Download 1</a>
<a id="download_image" href="https://www.w3schools.com/html/pic_trulli.jpg" download>Download 2</a>

Share Improve this question edited Feb 23, 2020 at 6:20 Penny Liu 17.4k5 gold badges86 silver badges108 bronze badges asked Jun 28, 2018 at 7:01 Thangakumar D 7745 gold badges13 silver badges28 bronze badges

On which browsers do you test that code? – Sylwester Pilarz Commented Jun 28, 2018 at 7:10
what browser do you use? Because I tested this in chrome and they both worked perfectly for me – mrdeadsven Commented Jun 28, 2018 at 7:10
In Firefox there is an issue that file must come from your own server or domain name, otherwise it will be opened in the browser. – Sylwester Pilarz Commented Jun 28, 2018 at 7:11
@mrdeadsven I am using Chrome version Version 67.0.3396.99. Download 2 link is navigating to the image not downloading – Thangakumar D Commented Jun 28, 2018 at 7:15
@SylwesterPilarz I am using chrome Version 67.0.3396.99 – Thangakumar D Commented Jun 28, 2018 at 7:16

| Show 1 more comment

5 Answers 5

Sorted by: Reset to default 10

Try the following using Promise and async/await :

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

then

async download() {
        const a = document.createElement("a");
        a.href = await toDataURL("http://serverpath/images/50.jpg");
        a.download = "";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
}

Find documentation here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

I think it works :

<HTML>
<Header></Header>

<body>
  <a id="download_image" href="" download="https://docs.google.com/uc?id=0B0jH18Lft7ypSmRjdWg1c082Y2M">Download 1</a>
  <a id="download_image" href="" download="http://serverpath/images/50.jpg">Download 2</a>
</body>

</HTML>

and checkout online demo if you like https://codepen.io/zhipenglu/pen/dKQXQx

and here is another lib do the same thing called file-writer: https://github.com/azl397985856/file-writer

It is working fine for me, maybe it will work for you if you try it like this by creating the link in javascript

var link = document.createElement('a');
link.textContent = 'download image';

link.addEventListener('click', function(ev) {
    link.href = "https://www.w3schools.com/html/pic_trulli.jpg";
    link.download = "image.jpg";
}, false);

document.body.appendChild(link);

<HTML>
<Header>
</Header>
<body>

</body>
</HTML>

Try this my code, using javascript and html https://codepen.io/irfanzidan09/pen/XWWmYjN?editors=1111 dont forget add

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<a id="download_image" href="" download="https://docs.google.com/uc?id=0B0jH18Lft7ypSmRjdWg1c082Y2M" download>Download 1</a>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Download images using HTML or JavaScript - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)