Tha*_*r D 3 html javascript image
我需要从服务器下载图像。在下面的 HTML5 代码中,“下载 1”成功下载了图像。但是“下载 2”是导航到图像 URL 而不是下载图像。“下载 1”和“下载 2”之间的主要区别在于“下载 2”的文件扩展名为“.jpg”。我想要“下载 2”来下载图像。
我需要下载带有文件扩展名的图像。请帮助解决问题。提前致谢!
<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>Run Code Online (Sandbox Code Playgroud)
使用 Promise 和 async/await 尝试以下操作:
toDataURL(url) {
return fetch(url).then((response) => {
return response.blob();
}).then(blob => {
return URL.createObjectURL(blob);
});
}
Run Code Online (Sandbox Code Playgroud)
然后
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);
}
Run Code Online (Sandbox Code Playgroud)
在此处查找文档:https : //developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
小智 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>Run Code Online (Sandbox Code Playgroud)
如果您喜欢,请查看在线演示https://codepen.io/zhipenglu/pen/dKQXQx
这是另一个库,它做同样的事情,称为文件编写器: https: //github.com/azl397985856/file-writer
| 归档时间: |
|
| 查看次数: |
15959 次 |
| 最近记录: |