puppeteer实现html截图的示例代码

阳光穿透心脏的1/2处 2021-06-11 15:14 553阅读 0赞

puppeteer是谷歌官方出品的一个通过 [DevTools ][DevTools]协议控制 headless Chrome 的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。

**安装**

直接运行安装命令：

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>npm </code><code>install</code> <code>puppeteer</code> </td> 
 </tr> 
 </tbody> 
</table>

如果出现无法安装的问题，可以使用淘宝镜像。

**puppeteer实现滑动截图**

在我 puppeteer 使用截全屏的过程中发现有些图片无法截取到，而实际上是因为有些图片是懒加载的，如果你没有滑动到图片的位置，那么这个图片是不会加载。

现在我的方式是采用模拟浏览器滚动条滑动的方式滑动底部来使图片加载出来。

代码如下：

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 </td> 
 <td> <code>const puppeteer = require(</code><code>'puppeteer'</code><code>);</code> &nbsp; <code>(async () =&gt; { </code> <code>&nbsp;&nbsp;</code><code>const browser = await puppeteer.launch({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>headless: </code><code>false</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>const page = await browser.newPage();</code> <code>&nbsp;&nbsp;</code><code>await page.goto(</code><code>'<a href="https://www.cnblogs.com/morethink/p/6525216.html" rel="nofollow">https://www.cnblogs.com/morethink/p/6525216.html</a>'</code><code>);</code> <code>&nbsp;&nbsp;</code><code>await page.setViewport({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width: 1200,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height: 800</code> <code>&nbsp;&nbsp;</code><code>});</code> &nbsp; <code>&nbsp;&nbsp;</code><code>await autoScroll(page);</code> &nbsp; <code>&nbsp;&nbsp;</code><code>await page.screenshot({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>path: </code><code>'1.png'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fullPage: </code><code>true</code> <code>&nbsp;&nbsp;</code><code>});</code> &nbsp; <code>&nbsp;&nbsp;</code><code>await browser.close();</code> <code>})();</code> &nbsp; &nbsp; <code>function</code> <code>autoScroll(page) { </code> <code>&nbsp;&nbsp;</code><code>return</code> <code>page.evaluate(() =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>new</code> <code>Promise((resolve, reject) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>totalHeight = 0;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>distance = 100;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>timer = setInterval(() =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code> <code>scrollHeight = document.body.scrollHeight;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.scrollBy(0, distance);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>totalHeight += distance;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(totalHeight &gt;= scrollHeight) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>clearInterval(timer);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>resolve();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}, 100);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

动图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o2OTE4Mzc4Nw_size_16_color_FFFFFF_t_70][]

**puppeteer 实现 html element 截图**

在某些情况下我们只想要针对html的某个位置进行截图而不是针对页面截全屏。

puppeteer提供了ElementHandle.screenshot 方法，该方法参数和page.screenshot 一样。而ElementHandle 对象是页面内的Dom对象。可以帮助我对 html element进行截图。这样的话你想截取页面的哪部分就截取页面的哪部分。

代码如下：

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 </td> 
 <td> <code>const puppeteer = require(</code><code>'puppeteer'</code><code>);</code> &nbsp; <code>(async () =&gt; { </code> <code>&nbsp;&nbsp;</code><code>const browser = await puppeteer.launch({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>headless: </code><code>false</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>const page = await browser.newPage();</code> <code>&nbsp;&nbsp;</code><code>await page.goto(</code><code>'<a href="https://www.cnblogs.com/morethink/p/6525216.html" rel="nofollow">https://www.cnblogs.com/morethink/p/6525216.html</a>'</code><code>);</code> <code>&nbsp;&nbsp;</code><code>await page.setViewport({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width: 1200,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height: 800</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>//获取页面Dom对象</code> <code>&nbsp;&nbsp;</code><code>let body = await page.$(</code><code>'#cnblogs_post_body'</code><code>);</code> <code>&nbsp;&nbsp;</code><code>//调用页面内Dom对象的 screenshot 方法进行截图</code> <code>&nbsp;&nbsp;</code><code>await body.screenshot({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>path: </code><code>'2.png'</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>await browser.close();</code> <code>})();</code> </td> 
 </tr> 
 </tbody> 
</table>

参考文档：

[https://github.com/GoogleChrome/puppeteer/blob/v1.11.0/docs/api.md\#elementhandlescreenshotoptions][https_github.com_GoogleChrome_puppeteer_blob_v1.11.0_docs_api.md_elementhandlescreenshotoptions]

[DevTools]: https://chromedevtools.github.io/devtools-protocol/
[Link 1]: https://www.jb51.net/article/154366.htm#
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o2OTE4Mzc4Nw_size_16_color_FFFFFF_t_70]: /images/20210527/a169aecc39ee4cbbb3ba5927789ab52e.png
[https_github.com_GoogleChrome_puppeteer_blob_v1.11.0_docs_api.md_elementhandlescreenshotoptions]: https://github.com/GoogleChrome/puppeteer/blob/v1.11.0/docs/api.md#elementhandlescreenshotoptions