首页 >web前端 >js教程 >如何使用数据 URI 下载具有自定义文件名的文件?

如何使用数据 URI 下载具有自定义文件名的文件?

Barbara Streisand
Barbara Streisand原创
2024-11-28 05:22:17161浏览

How Can I Download Files with Custom Filenames Using Data URIs?

使用数据 URI 下载具有自定义文件名的文件

数据 URI 提供了一种在网页中嵌入数据的便捷方法。然而,当从数据 URI 下载数据时,浏览器通常会提示用户输入文件名。是否可以在标记中提供建议的文件名或实现 JavaScript 解决方案?

下载属性

现代浏览器支持锚点的“下载”属性() 元素。此属性允许您为下载的文件指定建议的文件名。

<a download="FileName" href="data:application/octet-stream;base64,SGVsbG8=">
  Download
</a>

此解决方案适用于 Chrome、Firefox、Edge、Opera、桌面 Safari 10 、iOS Safari 13,但不适用于 IE11。

JavaScript解决方案

如果不支持“下载”属性,您可以使用 JavaScript 解决方案:

const link = document.createElement("a");
link.setAttribute("href", "data:application/octet-stream;base64,SGVsbG8=");
link.setAttribute("download", "FileName");
link.click();

此代码创建一个锚元素,设置“href”和“download”属性,然后模拟单击事件来触发下载。

以上是如何使用数据 URI 下载具有自定义文件名的文件?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn