使用puppeteer之全网页截图-修订版

超、凢脫俗 2021-09-20 03:02 563阅读 0赞

[https://blog.csdn.net/ASAS1314/article/details/84847770][https_blog.csdn.net_ASAS1314_article_details_84847770]

内容简介：

接上一篇的内容之前，简单介绍一下puppeteer环境的快速搭建；  
修订版目的；  
修订版具体实现，代码展示。  
1、puppeteer运行环境快速搭建

以下是个人从无到有的搭建过程，linux、windows系统搭建，大同小异：

1.1、首先是node.js的安装

1.1.1、官网下载安装包，node-v11.3.0-linux-x64.tar.xz

1.1.2、复制至/usr/local下

1.1.3、解压：tar -xvf node-v11.3.0-linux-x64.tar.xz

1.1.4、配置/etc/profile

export NODEJS\_HOME=/usr/local/nodejs  
   
export PATH=$NODEJS\_HOME/bin:$PATH  
1.1.5、执行source /etc/profile，查看node.js安装情况：node -v，查看npm安装情况：npm -v

\[master@master nodejs\]$ node -v  
v11.3.0  
\[master@master nodejs\]$ npm -v  
6.4.1  
1.2、安装puppeteer

如果是项目，则cd至项目路径下，如果是执行js文件，则安装在与js文件的同级目录下，因为实际场景中会有项目运行，以及一些单独运行的小项目存在，根据不同场景自行选择。

1.2.1、安装cnpm，直接通过npm安装puppeteer，容易失败，使用阿里淘宝的源

npm install -g cnpm --registry=https://registry.npm.taobao.org  
\-g参数，说明是全局安装。

1.2.2、查看cnpm版本

[master@master nodejs]$ cnpm -v
    cnpm@6.0.0 (/usr/local/nodejs/lib/node_modules/cnpm/lib/parse_argv.js)
    npm@6.4.1 (/usr/local/nodejs/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
    node@11.3.0 (/usr/local/nodejs/bin/node)
    npminstall@3.16.0 (/usr/local/nodejs/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
    prefix=/usr/local/nodejs 
    linux x64 3.10.0-693.el7.x86_64 
    registry=https://registry.npm.taobao.org

1.2.3、安装puppeteer

cnpm install puppeteer  
等待完成，到这里环境的基本搭建就完成了。如果是有node.js的其他安装包，先运行npm install，再运行puppeteer，因为经常更新环境，发现单独对puppeteer进行升级，会导致node\_modules下的软链接文件夹被删除。

2、修订版目的

理由：第一个版本太丑陋了。

3、修订版实现

其实已经写完很久了，一直疏于整理。主要针对第一个版本中的滚屏进行修改，看过第一版知道，其实现滚屏的方式是修改html页面中scrollTop的值。

document.scrollingElement.scrollTop = scrollTop + scrollStep;  
实际上可以使用window对象的相关函数。

上代码：

// puppeteer测试DEMO

真实线上的代码比这个来的复杂得多，这是被我阉割后的简易版本。

优化点：滚动优化，实时计算滚动次数，因为现在的页面大部分是动态加载。

上结果：没截全

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o2OTE4Mzc4Nw_size_16_color_FFFFFF_t_70][]

[https_blog.csdn.net_ASAS1314_article_details_84847770]: https://blog.csdn.net/ASAS1314/article/details/84847770
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o2OTE4Mzc4Nw_size_16_color_FFFFFF_t_70]: /images/20210527/f0326b46aede4ea6a5ad54722fc50619.png