如何使用 Javascript 将当前页面下载为文件/附件？答案

【问题标题】：How to download the current page as a file / attachment using Javascript?如何使用 Javascript 将当前页面下载为文件/附件？
【发布时间】：2011-11-08 10:46:20
【问题描述】：

我知道这里 (http://stackoverflow.com/questions/365777/starting-file-download-with-javascript) 和其他答案中提到的隐藏 iFrame 技巧。

我对类似的问题感兴趣：

如何使用 Javascript 将当前页面（IE：当前 DOM，或它的某些子集）下载为文件？

我有一个网页，它从 非确定性 查询（例如随机样本）中获取结果以显示给用户。我已经可以通过查询字符串参数使页面返回文件而不是呈现页面。我可以添加一个“获取文件版本”按钮（我们的标准方法），但结果会与显示的不同，因为它是不同的查询运行。

有没有办法通过 Javascript 将当前页面下载为文件，或者我唯一的选择是复制到剪贴板？

编辑 Stefan Kendall 和 dj_segfault 建议的一个选项是写入结果服务器端以供以后检索。好主意，但不幸的是，在这种情况下，服务器端写文件是不可能的。

颤抖将innerHTML作为post参数传递到另一个页面怎么样？

【问题讨论】：

标签： javascript download attachment

【解决方案1】：

您可以尝试使用协议data:text/attachment

喜欢：

<html>
<head>
    <style>
    </style>
</head>
<body>
    <div id="hello">
        <span>world</span>
    </div>
<script>
(function(){
    document.location = 
        'data:text/attachment;,' + //here is the trick
        document.getElementById('hello').innerHTML;
            //document.documentElement.innerHTML; //To Download Entire Html Source
})();
</script>
</body>
</html>

编辑在shesek评论后

【讨论】：

不需要iframe，他只需document.location=即可
@shesek 今天学到了一件大事。谢谢！
@xan 可能带有 window.open 并使用标题，但您会得到一个新标签
新标签会很好，如果不是这样的话，对这种情况有好处。
Not allowed to navigate top frame to data URL:

【解决方案2】：

要补充 Mic 上面的精彩回答，请补充几点：

如果您有 Unicode 内容（或希望在源中保留缩进），则需要将字符串转换为 Base64 并告诉 Data URI 以这样的方式处理数据：

(function(){
    document.location = 
        'data:text/attachment;base64,' + // Notice the new "base64" bit!
        utf8_to_b64(document.getElementById('hello').innerHTML);
            //utf8_to_b64(document.documentElement.innerHTML); //To Download Entire Html Source
})();

function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

utf_to_b64() via MDN -- 适用于 Chrome/FF。

您可以将这一切放到一个锚标记中，允许您设置下载属性：

<a onclick="$(this).attr('href', 'data:text/plain;base64,' + utf8_to_b64($('html').clone().find('#generate').remove().end()[0].outerHTML));" download="index.html" id="generate">Generate static</a>

这会将当前页面的 HTML 下载为 index.html 并删除用于生成输出的链接。这假设上面的 utf8_to_b64() 函数是在其他地方定义的。

有关数据 URI 的一些有用链接：

【讨论】：

【解决方案3】：

取决于大小以及是否需要对古代浏览器的支持，但您可以考虑使用 data: URI 创建一个动态文件并链接到它。我见过几个这样做的地方。要让浏览器下载而不是显示它，请使用您在 URI 中输入的内容类型并使用新的 html5 下载属性。（抱歉有错别字，我是用手机写的）

【讨论】：

【解决方案4】：

我不认为你能够完全按照你想要的方式去做。出于安全原因，JavaScript 无法创建文件并下载它。也不能在服务器上创建供下载。

如果我是你，我会在服务器端创建一个输出文件，名称中的会话 ID 在您为网页创建输出时在临时目录中创建，并在网络上有一个按钮带有指向该文件的链接的页面。

您可能需要一个单独的进程来删除超过一天的文件或类似的东西。

【讨论】：

这就是我所担心的。不幸的是，编写服务器端文件是不可能的。

【解决方案5】：

你能不缓存查询结果，并通过某个键存储它吗？这样，您可以永远引用相同的报告输出，或者直到您的文件垃圾收集器出现。这也意味着您可以创建静态 URL 来报告输出，这往往很好。

【讨论】：

不幸的是，编写服务器端文件是不可能的。