本文目的

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

在经过前期的技术调研之后，确定了使用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

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

Ubuntu上sublime配置nodejs运行环境
Ubuntu上sublime配置nodejs运行环境如果阅读无障碍的话可以直接查看https://packagecontrol.io/packages/Nodejs上面说的很详细如果不想看的话, ...
Linux上的node站点之centos配置nodejs运行环境笔记
centos配置nodejs运行环境原来的项目放在windowsserver上了,现在换个系统要重新配置下. 先看看是不是安装python rpm -qa|grep python 一般租的云服务器会 ...
安装NodeJs运行环境
关于大名鼎鼎的Nodejs是什么就不用再介绍了,他的牛逼之处数都数不完--让javascript称霸全宇宙.将一个只用于前端的编程语言同时可以制霸前后端.让致力于前端开发的小哥又多了一项事业新增了一门 ...
NodeJS 运行环境
NodeJS 运行环境包含 CommonJS 模块规范.global 全局对象.process 当前进程 CommonJS 模块规范理解 CommonJS 模块前先来看一个简单的例子: 创建一个 r ...
Node-RED使用指南：6:配置与设定总结：运行环境配置
在前一篇文章中通过设定settings.js文件,配置出了Node-RED的管理员登录页面,这篇文章将就Node-RED的配置和设定的运行环境配置部分进行总结. 配置文件配置文件从哪里读出来,实际上 ...
SAR成像处理软件运行环境配置（AGX平台）
1. AGX简介本文档重点介绍在AGX开发平台上,部署SAR成像处理相关的软件.AGX的相关信息可以参考下面的文档. AI 助力的大批自主机器 | NVIDIA Jetson AGX Xavier具 ...
java安装及运行环境配置
本文将讲解java的安装以及相关运行环境的配置. 安装安装包可以去官网下载.版本尾号为偶数一般为测试版本,所以推荐下载奇数尾数安装包. 安装界面,一直下一步即可. 安装路径设置,如果为节省c ...
Asymptote 的编译安装与运行环境配置
简介 Asymptote 是一种支持二维与三维绘图并且对 TeX 非常友好的科学绘图编程语言. 从 Asymptote svn 仓库迁出源码 $ svn co http://asymptote.svn ...
ASP.NET运行环境配置
转自http://www.cnblogs.com/koeltp/archive/2012/02/08/2343394.html Win7旗舰版中的IIS配置asp.net的运行环境以前弄过好多次,都 ...

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