JavaScript:截图呈现的网页浏览器样式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript:截图呈现的网页浏览器样式相关的知识,希望对你有一定的参考价值。

我认为这个问题可能在之前被问过,但经过几个小时的搜索后,我还没有发现任何令人满意的问题。

这是我的问题:是否可以使用javascript截取完全呈现的网页?有点像大多数浏览器在ctrl+p的新闻窗口上做的事情。

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

我需要将屏幕截图打印为图像或PDF。任何的想法?

谢谢。

答案

你看过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();
})();

以上是关于JavaScript:截图呈现的网页浏览器样式的主要内容,如果未能解决你的问题,请参考以下文章

html,css,javascript在制作网页中的作用,三者之间有何种联系?

网页不会呈现指定的字体

前端内容介绍

轻松让你实现浏览器截图截屏

浏览器渲染页面

浏览器渲染引擎总结