首页 > web前端 > js教程 > 正文

如何在 JavaScript 中下载数据 URL:Chrome 和 Firefox 解决方案?

Barbara Streisand
发布: 2024-11-27 02:54:14
原创
657 人浏览过

How to Download Data URLs in JavaScript: A Chrome and Firefox Solution?

在 JavaScript 中下载数据 URL

在尝试创建基于 JavaScript 的压缩/解压缩实用程序时,您遇到了以下问题下载数据 URL 中编码的文件。虽然这种方法在 Firefox 中有效,但在 Chrome 中却失败了。

Chrome 的困境

Chrome 不支持直接下载数据 URL。相反,当使用 img 标签引用时,它会将它们嵌入为图像。这会给非图像文件格式带来问题。

解决方法

幸运的是,有一个解决方法可以在 Chrome 和 Firefox 中启用数据 URL 下载。解决方案包括创建一个临时 a 元素,将其 download 属性设置为所需的文件名,并将数据 URL 分配给其 href 属性。

代码示例

以下JavaScript 函数 downloadURI 实现了这个解决方法:

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}
登录后复制

用法

要使用此函数,请提供数据 URL 和所需的下载文件名作为参数:

downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");
登录后复制

这种方法会在 Chrome 和 Firefox 中提示下载对话框,允许用户使用指定的文件名保存文件。

以上是如何在 JavaScript 中下载数据 URL:Chrome 和 Firefox 解决方案?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板