如何在 Javascript 中动态创建要下载的文档？答案

【问题标题】：How do I dynamically create a document for download in Javascript?如何在 Javascript 中动态创建要下载的文档？
【发布时间】：2011-01-30 04:16:41
【问题描述】：

我正在编写一些在客户端生成 XML 文档的 Javascript 代码（通过Google Earth plugin）。我希望用户能够单击页面上的按钮并被提示将该 XML 保存到新文件中。如果我正在生成 XML 服务器端，这将很容易，只需使按钮打开链接。但是 XML 是在客户端生成的。

我想出了几个成功的技巧，部分灵感来自this StackOverflow question。但两者都不完全有效。这是一个带有嵌入代码的演示 HTML：

<html><head><script>
function getData() { return '<?xml version="1.0" encoding="UTF-8"?><doc>Hello</doc>'; }
function dlDataURI() {
  window.open("data:text/xml;charset=utf-8," + getData());
}
function dlWindow() {
  var w = window.open();
  w.document.open();
  w.document.write(getData());
  w.document.close();
}
</script><body>
<div onclick="dlDataURI()">Click for Data URL</div>
<div onclick="dlWindow()">Click for Window</div>
</body></html>

dlDataURI() 版本在 Firefox 中效果很好，在 Chrome 中效果不佳（无法保存），而在 IE 中则完全不行。 Window() 版本在 Firefox 和 IE 中运行良好，但在 Chrome 中运行不佳（无法保存，XML 嵌入在 HTML 中）。这两个版本都不会提示用户下载，它总是会打开一个新窗口来尝试显示 XML。

有没有一种好方法可以在客户端 Javascript 中做我想做的事情？我希望它能够在当今的浏览器中运行，最好是 Firefox、MSIE 8 和 Chrome。

使用示例下载代码更新

window.onload = function() {
  Downloadify.create("dlify", {
    data: getData(),
    filename: "data.xml",
    swf: 'media/downloadify.swf',
    downloadImage: 'images/download.png',
    width: 100, height: 30});};

【问题讨论】：

这个较新的 Stack Overflow 问题有很多不需要 Flash 的答案。大多数涉及在 DOM 中构造 data: URL。 stackoverflow.com/questions/19721439/…

标签： javascript browser download

【解决方案1】：

目前我见过的最好的是Downloadify by Doug Neiner，它需要 Flash 但效果很好：

“一个小型 JavaScript + Flash 库，可以在浏览器中动态生成和保存文件，无需服务器交互。”

检查此video。

【讨论】：

对，我的答案中链接到的 API 的包装器。不错。
感谢您的指点，这是一个很棒的小图书馆。免费软件许可证，比较好用。遗憾的是它需要 Flash，但如果 Javascript 无法应对，我并不感到惊讶。注意：下载通过 Flash 保存到磁盘，它不通过浏览器的下载管理器。我将用一个代码 sn-p 来更新我的问题，演示这个库是如何工作的。
上面那个网址已经失效了。看起来你可以在 github 上找到 downloadify：github.com/dcneiner/Downloadify

【解决方案2】：

如果 Flash 是一个选项，那么 Flash Player（版本 10+）提供了从本地文件系统中有限读取/写入文件的方法。

看看这个：

http://help.adobe.com/en_US/AS3LCR/Flash_10.0/flash/net/FileReference.html#save%28%29

【讨论】：