Question

我需要从服务器下载图像。在下面的HTML 5代码“下载1”中，将成功下载图像。但是“下载2”是导航到图像URL，而不是下载图像。 “下载1”和“下载2”之间的主要区别是“下载2”在文件名中的文件扩展名为“ .jpg”。我想要“下载2”来下载图片。

我需要下载文件扩展名的图像。请帮助解决问题。提前致谢！

<HTML>
<Header></Header>
<body>
<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>
</body>
</HTML>

Answer 1

我认为它可行：

<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>

并查看在线演示，如果您喜欢https://codepen.io/zhipenglu/pen/dKQXQx

这是另一个lib做同样的事情，称为文件编写器：https://github.com/azl397985856/file-writer

Answer 2

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

Answer 3

它对我来说很好，如果您通过在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>

Answer 4

使用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("http://serverpath/images/50.jpg");
        a.download = "";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
}

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

Answer 5

db.collection.aggregate([ { $addFields: { sortBy: { $ifNull: [ "$parentId", "$_id" ] } } }, { $sort: { sortBy: -1, parentId: 1 } } ]) https://codepen.io/irfanzidan09/pen/XWWmYjN?editors=1111 不要忘记添加

Try this my code, using javascript and html

使用HTML或JavaScript下载图像

5 个答案: