使用 PhantomJS 渲染网页答案

【问题标题】：Render a web page using PhantomJS使用 PhantomJS 渲染网页
【发布时间】：2014-12-20 00:00:26
【问题描述】：

是否可以将具有所有计算样式的整个文档的 html 传递给服务器以获取 PhantomJS 渲染并保存到 PNG？（类似于html2canvas）

我想要实现的是使用 PhantomJS 截取网页（处于当前状态）。因此，模态对话框、单击的选项卡等内容都将显示在屏幕截图中。

【问题讨论】：

【解决方案1】：

您不能传递计算样式，因为它们不存在于 DOM 中。它是应用 CSS 时 DOM 节点的属性。为了使其工作，您需要使服务器可以访问每种样式，例如，当样式表受到访问控制时，服务器将需要额外登录或类似的东西。不过这种情况应该很少见。

发送可能就足够了

document.documentElement.outerHTML

到服务器并让 PhantomJS 渲染接收到的 HTML

var page = require('webpage').create();
page.onLoadFinished = function(status){
    page.render("page.png");
    phantom.exit();
};
page.content = "received HTML as string"
    .replace(/href="\/\//g, 'href="http://')
    .replace(/href=\/\//g, 'href=http://');

有时资源（样式表）在其 URL 中缺少协议，但 PhantomJS 在加载本地页面时需要 http 协议（设置 page.content），否则它将假定 URL 使用 file:// 而不是 http://。

您可能需要使用一些命令行选项（例如 --ssl-protocol=tlsv1 或 --local-to-remote-url-access=true）来运行 PhantomJS。

【讨论】：