JavaScript：屏幕截图呈现的网页浏览器样式答案

【问题标题】：JavaScript: screenshot rendered web page Browser styleJavaScript：屏幕截图呈现的网页浏览器样式
【发布时间】：2017-01-31 08:32:37
【问题描述】：

我认为这个问题之前可能有人问过，但经过数小时的搜索，我没有找到任何令人满意的东西。

这是我的问题：是否可以使用 JavaScript 截取完全呈现的网页？有点像大多数浏览器在按下ctrl+p 时在 Windows 上所做的。

我研究了很多替代解决方案，例如 html2Canvas.js 但没有一个适合我的需要。最大的问题是我的网页几乎完全使用 Javascript 在客户端呈现。这也是为什么像PhantomJS 这样的服务器端解决方案几乎不适用的原因。

我需要将屏幕截图打印为图像或 PDF。有什么想法吗？

谢谢。

【问题讨论】：

“最大的问题是我的网页几乎完全使用 Javascript 在客户端呈现。这也是为什么像 PhantomJS 这样的服务器端解决方案几乎不适用的原因。” - 为什么？ PhantomJS 完全有能力执行你页面的 JS。或者，您可以将当前呈现的 HTML AJAX 发送到服务器，并让它为您呈现该静态快照。 AFAIK 没有好的客户端解决方案（尽管 html2Canvas 似乎相当接近）。如果您说它们不适合您的需求，您需要说明原因，否则我们无法提出任何解决方案。
嘿@Amadan，感谢您的回答。我知道 phantomJs 完全能够执行我的页面，但是，页面完全在客户端呈现，使用客户端凭据生成正确的数据。凭据是从 PHP 会话变量中读取的。我尝试渲染页面，然后将 HTML 发送回服务器以供 PhantomJS 处理，但由于 HTML 的大小（页面很大），它每次都会崩溃。到目前为止；我还没有找到将会话变量传递给 PhantomJS 的方法。
会话由 cookie 识别。复制 cookie (phantom.addCookie)，你就会得到你的会话。
谢谢。这似乎有效。

标签： javascript html pdf web screenshot

【解决方案1】：

你看过Puppeteer by Google吗？

如果您能够在您的服务器上运行它，它可能正是您正在寻找的。查看他们的示例代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

【讨论】：