nodejs运行环境配置并使用puppeteer实现后台截图

本文目的

不知道小伙伴们有没有遇到过后台截图这样的需求，今天我将自己的经验总结出来分享给大家。

在经过前期的技术调研之后，确定了使用nodejs的puppeteer库实现后台截图，并通过java Runtime.getRuntime().exec()方法调用node命令执行js截图脚本。

下载安装nodejs

下载链接：https://nodejs.org/download/release/

可以用v14.1.0版本，亲测有效

下载后解压，如果是linux tar.xz格式，可执行tar xz xx.tar.xz解压

配置nodejs运行环境

将nodejs根目录配置到PATH环境变量中，可执行node -v测试配置是否成功

新建node_global和node_cache文件夹，并进行如下配置

npm config get prefix
npm config get cache
npm config set prefix "D:\dev\nodejs\node_global"
npm config set cache "D:\dev\nodejs\node_cache"

另外再将D:\dev\nodejs\node_global路径加到PATH环境变量中

配置国内淘宝npm镜像：

# 配置镜像站
npm config set registry=http://registry.npm.taobao.org
# 检查一下镜像站是否正常
npm config get registry

安装puppeteer截图库

puppeteer官网：https://zhaoqize.github.io/puppeteer-api-zh_CN/#/class-Puppeteer

安装命令：npm install -g puppeteer

vscode配置node运行环境

如果想进行代码断点调试，可在vscode中进行。

下载Code Runner和JS的语法提示JavaScript(ES6) code snippets两个插件，然后就可以断点debug啦

编写js截图脚本

const puppeteer = require('D:/dev/nodejs/node_global/node_modules/puppeteer');

const argvs = process.argv;
var pageUrl = "https://www.csdn.net/";

const browserConfig = {
    args: [
        '--disable-gpu',
        '--disable-dev-shm-usage',
        '--disable-setuid-sandbox',
        '--no-first-run',
        '--no-sandbox',
        '--no-zygote',
        '--single-process',
    ]
};
const cookies = [
    
];

(async () => {
    try {
        const browser = await puppeteer.launch(browserConfig);
        const page = await browser.newPage();
        await page.setCookie(...cookies); // 4~7天的时效性（不同字段不一样），如果用户重新登录，也会失效

        console.log("浏览网页：" + pageUrl);

        await page.goto(pageUrl,{});
        await page.waitForTimeout(5000);
        const pageHeight = await page.evaluate(function() {
            // 这段代码是在浏览器中运行的，而不是在nodejs中，因此无法断点
            var scrollHeight = document.getElementById('app').clientHeight;
            return scrollHeight ;
        });
        console.log("页面高度：" + pageHeight);

        const page2 = await browser.newPage();
        await page2.setViewport({
            width: 1500,
            height: pageHeight
        });
        await page2.goto(pageUrl,{
            waitUntil: 'networkidle0',
            timeout: 40000
        });
        await page2.waitForTimeout(10000); // 视图渲染等待时间
        await page2.screenshot({path: "E:/tmp/w3c.png",fullPage: true});
        await browser.close();
    } catch (error) {
        console.log(error);
    }
    console.log("OK");
})();

如果需要用到cookie的话（某些页面需要用户登录认证后才可访问），可以下载chrome浏览器插件cookie editor，这个插件可以很方便地导出cookie。

查看截图

运行代码，下图就是通过脚本截出来的图。

报错解决方案

如果在linux上运行有类似这样的报错：error while loading shared libraries: libatk-1.0.so.0: cannot open shared object file: No such file，可参考如下解决方案：

• 一
  报错：/home/work/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libatk-1.0.so.0: cannot open shared object file: No such file or directory
  解决：yum install atk
• 二
  报错:/home/work/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libatk-bridge-2.0.so.0: cannot open shared object file: No such file or directory
  解决:yum install at-spi2-atk
• 三
  报错:/home/work/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libxkbcommon.so.0: cannot open shared object file: No such file or directory
  解决:yum install libxkbcommon-x11-devel
• 四
  报错:/home/work/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libXcomposite.so.1: cannot open shared object file: No such file or directory
  解决:yum install libXcomposite
• 五
  报错:/home/work/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libgtk-3.so.0: cannot open shared object file: No such file or directory
  解决:yum install gtk3