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
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgaghha
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13