在本教程中，如何在javascript中从一个给定的URL中下载文件或图像。
在Web应用程序中，你有一个特色的下载链接，可以从一个给定的URL下载图片。
你有一个如下的锚点链接
Download File
当用户点击该链接时，它会从一个服务器的网址上下载一个文件。
我们有多种方法可以做到这一点。
用HTML5下载文件的例子
如果图像存在于客户端或网络服务器中，我们可以简单地使用带有下载属性的锚定标签，其中包含要下载的文件的名称。
Download File
当点击下载链接时，它会将name.png下载到浏览器并保存到文件系统。
如果图片或文件来自服务器，这将不起作用，你必须使用客户端的javascript下载。
获取javascript来下载一个文件
fetch 是最新的浏览器中引入的一项本地浏览器功能。它用于通过网络请求从远程服务器获取文件并返回响应。
- 它返回响应并转换为blob对象的字节码。
- 它调用并使用该字节码创建一个URL。
- 创建一个内联锚元素，并将href更新为这个blob字节码。
- 你可以将文件的名称更新为下载属性
- 将锚点元素添加到DOM树中
- 最后启动点击事件来下载文件，就像锚点事件一样。
下面是一个从给定的URL下载文件的示例代码
fetch(url)
.then(resp => resp.blob())
.then(blobobject => {
const blob = window.URL.createObjectURL(blobobject);
const anchor = document.createElement('a');
anchor.style.display = 'none';
anchor.href = blob;
anchor.download = "name.png"";
document.body.appendChild(anchor);
anchor.click();
window.URL.revokeObjectURL(blob);
})
.catch(() => console.log('An error in downloadin gthe file sorry'));
}
你也可以使用async和promises来下载文件。
结论
在这个简短的教程中，你学到了在javascript和html中下载文件或图片的不同方法。
