javascript 如何使用Javascript将当前页面下载为文件/附件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7271524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to download the current page as a file / attachment using Javascript?
提问by xan
I am aware of the hidden iFrame trick as mentioned here (http://stackoverflow.com/questions/365777/starting-file-download-with-javascript) and in other answers.
我知道这里 (http://stackoverflow.com/questions/365777/starting-file-download-with-javascript) 和其他答案中提到的隐藏 iFrame 技巧。
I am interested in a similar problem:
我对类似的问题感兴趣：
How can I use Javascript to download the currentpage (IE: the current DOM, or some sub-set of it) as a file?
如何使用 Javascript 将当前页面（IE：当前 DOM，或它的某些子集）下载为文件？
I have a web page which fetches results from a non-deterministicquery (eg. a random sample) to display to the user. I can already, via a querystring parameter, make the page return a file instead of rendering the page. I can add a "Get file version" button (our standard approach) but the results will be different to those displayed because it is a different run of the query.
我有一个网页，它从非确定性查询（例如随机样本）中获取结果以显示给用户。我已经可以通过查询字符串参数使页面返回一个文件而不是呈现页面。我可以添加一个“获取文件版本”按钮（我们的标准方法），但结果将与显示的不同，因为它是不同的查询运行。
Is there any way via Javascript to download the current page as a file, or is copying to the clipboard my only option?
有没有办法通过Javascript将当前页面下载为文件，或者复制到剪贴板是我唯一的选择？
EDITAn option suggested by Stefan Kendall and dj_segfault is to write the result server side for later retrieval. Good idea, but unfortunately writing files server side is out of the question in this instance.
编辑Stefan Kendall 和 dj_segfault 建议的一个选项是编写结果服务器端供以后检索。好主意，但不幸的是，在这种情况下，编写文件服务器端是不可能的。
How about shudderpassing the innerHTMLas a post parameter to another page?
不寒而栗如何将innerHTML作为 post 参数传递到另一个页面？
回答by Mic
You can try with the protocol data:text/attachment
您可以尝试使用协议 data:text/attachment
Like in:
像：
<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>
Editafter shesek comment
在shesek评论后编辑
回答by aendrew
To add to Mic's terrific answer above, some additional points:
要添加到上面 Mic 的绝妙答案，还有一些额外的要点：
(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-- works in Chrome/FF.
utf_to_b64() 通过 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>
This will download the current page's HTML as index.html and removes the link used to generate the output. This assumes the utf8_to_b64() function from above is defined somewhere else.
这会将当前页面的 HTML 下载为 index.html 并删除用于生成输出的链接。这假设上面的 utf8_to_b64() 函数是在其他地方定义的。
Some useful links on Data URIs:
关于数据 URI 的一些有用链接：
回答by shesek
Depending on the size and if support is needed for ancient browsers, but you can consider creating a dynamic file using data: URIs and link to it. I'be seen several places that do that. To get the brorwser to download rather than display it, play around with the content type you put in the URI and use the new html5 download attribute. (Sorry for any typos, I'm writing from my phone)
根据大小以及是否需要旧浏览器的支持，但您可以考虑使用数据创建动态文件：URI 并链接到它。我看到有几个地方这样做了。要让浏览器下载而不是显示它，请使用您放在 URI 中的内容类型并使用新的 html5 下载属性。（抱歉打错了，我是用手机写的）
回答by dj_segfault
I don't think you're going to be able to do it exactly the way you want to. JavaScript can't create a file and download it for security reasons. Nor can it create it on the server for download.
我不认为你将能够完全按照你想要的方式去做。出于安全原因，JavaScript 无法创建文件并下载它。它也不能在服务器上创建它以供下载。
What I would do if I were you is, on the server side, create an output file with the session ID in the name in a temp directory as you create the output for the web page, and have a button on the web page with a link to that file.
如果我是你，我会做的是，在服务器端，当你为网页创建输出时，在临时目录中创建一个名称中带有会话 ID 的输出文件，并在网页上有一个带有链接到该文件。
You'll probably want a separate process to remove files over a day old or something like that.
您可能需要一个单独的过程来删除一天前的文件或类似的东西。
回答by Stefan Kendall
Can you not cache the query results, and store it by some key? That way you can reference the same report output forever, or until your file garbage collector comes along. This also implies that you can create static URLs to report outputs, which tends to be nice.
你能不能不缓存查询结果，并通过某个键存储它？这样你就可以永远引用相同的报告输出，或者直到你的文件垃圾收集器出现。这也意味着您可以创建静态 URL 来报告输出，这往往很好。
