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

IT技术 javascript download attachment
2021-03-16 11:30:38

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

我对类似的问题感兴趣:

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

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

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

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

不寒而栗如何innerHTML作为 post 参数传递到另一个页面?

5个回答

您可以尝试使用协议 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=
2021-04-22 11:30:38
@shesek 今天学到了一些重要的东西。谢谢!
2021-04-22 11:30:38
新标签会很好,如果不是这种情况的优势。
2021-04-22 11:30:38
@xan 可能带有window.open并播放标题,但您会得到一个新标签
2021-04-27 11:30:38
Not allowed to navigate top frame to data URL:
2021-05-09 11:30:38

要添加到上面 Mic 的绝妙答案,还有一些额外的要点:

  • 如果您有 Unicode 内容(或者想要在源中保留缩进),您需要将字符串转换为 Base64 并告诉数据 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() 通过 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 的一些有用链接:

    根据大小以及是否需要旧浏览器的支持,但您可以考虑使用数据创建动态文件:URI 并链接到它。我看到有几个地方这样做了。要让浏览器下载而不是显示它,请使用您放在 URI 中的内容类型并使用新的 html5 下载属性。(抱歉打错了,我是用手机写的)

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

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

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

    这就是我所害怕的。不幸的是,编写服务器端文件是不可能的。
    2021-05-12 11:30:38

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

    不幸的是,编写服务器端文件是不可能的。
    2021-05-14 11:30:38