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

时间:2011-09-01 14:08:06

标签: javascript download attachment

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

我对类似的问题感兴趣:

如何使用Javascript将当前页面(IE:当前DOM或其​​某些子集)下载为文件?

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

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

修改 Stefan Kendall和dj_segfault建议的选项是编写结果服务器端以供以后检索。好主意,但遗憾的是在这种情况下写文件服务器端是不可能的。

shudder 如何将innerHTML作为帖子参数传递给另一个页面?

5 个答案:

答案 0 :(得分:17)

您可以尝试使用协议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 comment

编辑

答案 1 :(得分:6)

为了增加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上的一些有用链接:

    答案 2 :(得分:1)

    根据大小和古代浏览器是否需要支持,您可以考虑使用数据创建动态文件:URI并链接到它。我见过几个这样做的地方。要让brorwser下载而不是显示它,请使用您在URI中放入的内容类型,并使用新的html5下载属性。 (对不起打字错误,我是用手机写的)

    答案 3 :(得分:0)

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

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

    您可能需要一个单独的进程来删除一天之内或类似的文件。

    答案 4 :(得分:0)

    您是否可以缓存查询结果,并通过某些键存储它?这样,您可以永久引用相同的报表输出,或直到您的文件垃圾收集器出现。这也意味着您可以创建静态URL来报告输出,这往往很不错。