使用 HTML 或 JavaScript 下载图像
[英]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.在下面的 HTML5 代码中，“下载 1”成功下载了图像。 But 'Download 2' is navigating to the image URL instead of downloading the image.但是“下载 2”是导航到图像 URL 而不是下载图像。 The main difference between 'Download 1' and 'Download 2' is 'Download 2' has file extension as'.jpg' in the file name. “下载 1”和“下载 2”之间的主要区别在于“下载 2”的文件扩展名为“.jpg”。 I want 'Download 2' to download the image.我想要“下载 2”来下载图像。
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>
5 个解决方案
解决方案1
7 2019-05-08 13:16:36
Try the following using Promise and async/await :使用 Promise 和 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在此处查找文档： https : //developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
解决方案2
1 2018-06-28 07:13:01
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如果您喜欢https://codepen.io/zhipenglu/pen/dKQXQx，请查看在线演示
and here is another lib do the same thing called file-writer: https://github.com/azl397985856/file-writer这是另一个 lib 做同样的事情，称为文件编写器： https : //github.com/azl397985856/file-writer
解决方案3
0 2018-06-28 07:16:09
<a id="download_image" href="" download="https://docs.google.com/uc?id=0B0jH18Lft7ypSmRjdWg1c082Y2M" download>Download 1</a>
解决方案4
0 2018-06-28 07:35:13
It is working fine for me, maybe it will work for you if you try it like this by creating the link in javascript它对我来说很好用，如果你像这样通过在 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>
解决方案5
0 2019-10-11 03:35:04
Try this my code, using javascript and html https://codepen.io/irfanzidan09/pen/XWWmYjN?editors=1111不要忘记添加
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.