puppeteer调研--生成页面的屏幕截图和PDF
最近工作需要用到puppeteer,做一个学习笔记。
概念
Puppeteer是一个Node库,它提供了高级API来通过DevTools协议控制Chrome或Chromium。 Puppeteer默认情况下无头运行,但可以配置为运行完整(无头)的Chrome或Chromium。
主要应用
- 生成页面的屏幕截图和PDF。
- 抓取SPA(单页应用程序)并生成预渲染的内容(即“ SSR”(服务器端渲染))。
- 自动执行表单提交,UI测试,键盘输入等。
- 创建最新的自动化测试环境。 使用最新的JavaScript和浏览器功能,直接在最新版本的Chrome中运行测试。
- 捕获站点的时间线跟踪以帮助诊断性能问题。
- 测试Chrome扩展程序。
调研作用:生成该页面的屏幕截图和PDF
截屏的例子:
const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto('https://example.com');await page.screenshot({path: 'example.png'});await browser.close();
})();
创建example.js文件,作用是将https://example.com的页面截屏并生成图片example.png
使用命令node example.js可以获取图片
参数:
默认的截取大小是800×600px(可能非全图可用参数设置)
是否全页面:fullPage:true
调整大小:大小可以调整,示例如下,将大小调整为1200x800px
调整图片质量:quality,针对png图片不可调整
图片格式:根据文件后缀指定,如png,jpeg
const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.setViewport({width: 1200,height: 800,deviceScaleFactor: 1,});await page.goto('https://example.com');await page.screenshot({path: 'example3.jpeg',fullPage:true,quality: 50});await browser.close();
})();
更全面的使用
const puppeteer = require('C:/Program Files/nodejs/node_modules/puppeteer');(async () => {const browser = await puppeteer.launch({headless: true, args:['--no-sandbox']});const page = await browser.newPage();await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36');await page.setViewport({width: 1200,height: 800});await page.goto('https://www.baidu.com',{referer:'https://blog.csdn.net/hello_bravo_'});await page.screenshot({path: 'example.jpeg',quality: 50});await browser.close();
})();
若是需要等待页面加载完毕可以用如下代码
const puppeteer = require('/data/node_modules/puppeteer');(async () => {const browser = await puppeteer.launch({headless: true, args:['--no-sandbox']});const page = await browser.newPage();await page.setViewport({width: 750,height: 800});await page.goto(url,{waitUntil:'networkidle2'});await page.screenshot({path: 'example.jpeg',quality: 100, fullPage: true}); await browser.close();
})();
puppeteer调研--生成页面的屏幕截图和PDF相关推荐
- itext html转pdf尺寸设置,如何设置PDF页面尺寸A4,当我们使用ITextRenderer生成从thymeleaf HTML模板PDF?...
如何设置PDF页面尺寸A4,当我们使用ITextRenderer生成从thymeleaf HTML模板PDF? 我已经生成的PDF,但页面大小是不正确的,如何在JAVA设置页面大小A4 ITextRe ...
- python合并pdf文件并生成页面
1. 环境搭建 # python 版本 3.9.7 # 依赖包 reportlab==3.6.9,PyPdf2==1.27.3,pikepdf==3.0.8,pyinstaller==4.10 2.功 ...
- react骨架屏自动生成_用纯 DOM 的方式结合 Puppeteer 自动生成网页骨架屏
骨架屏是在页面数据尚未加载完成前先给用户展示出页面的大致结构,直到请求数据返回后再显示真正的页面内容:随着单页应用( SPA )的越来越流行,单页应用的用户体验也越来越得到前端开发者的关注:为了优化用 ...
- 【前端html页面数据导出为pdf文件】
[前端html页面数据导出为pdf文件] 文前白话 在网页端导出 Excel 数据表格保存本地 前端html页面数据导出为pdf文件 文前白话 项目需要,将网页端查询的数据结果与数据分析结果导出文件, ...
- 页面截图导出为PDF,以及PDF强行截断分页问题的处理
页面截图导出为PDF,以及PDF强行截断分页问题的处理 需求 将页面内容截图导出为PDF文件,如果有高度过高的表格或图片,尽量不截断而是放在下一页展示. 思路 1.将需要导出的dom,都用一个特殊的类 ...
- linux 网页另存为pdf,zhtmltopdf v0.2版发布 url页面转存为pdf或image扩展
zhtmltopdf v0.2版发布 url页面转存为pdf或image扩展 发布时间:2014-06-05 21:24:24来源:红联作者:empast zhtmltopdf 是一个把 url页面转 ...
- 解析markdown_利用 markdown 生成页面实践
为什么要用 markdown 来生成页面 对于展示型网站,例如官网这种场景,会有很多小的页面,运营会根据市场时刻有增删修改类似页面的需求,如果每次都响应运营的需求,不断地迭代增删页面,这个工作是很难终 ...
- 也谈WEB打印(四):让我们的模板支持打印,并根据内容动态的生成页面
在上一篇文章<也谈WEB打印(三):抛开IE,实现我们自己的打印模板>中,我们写了一个自己的打印模板,然而,该模板并不支持打印,也只能显示2个页面.在本文,我们继续完善该模板,以让他支持打 ...
- PDF怎么删除不要的页面?免费删除PDF页面教程来了
PDF怎么删除不要的页面?免费删除PDF页面的教程来了,还不知道怎么删除PDF页面的赶紧看过来,无论你是手机用户还是电脑用户,都可以轻松快速免费删除多余的PDF页面,只需一个"金闪PDF编辑 ...
最新文章
- python第一周小测验_Python小测试
- 【Flutter】插件包选择 ( 查看文档是否全面 | 查看插件包的更新版本次数 | 查看使用示例 | 查看 GitHub 项目的 Star Fork Issues )
- zend studio 9.0汉化
- SQLyog连接虚拟机中docker中的mysql过程详解,并解决2003错误
- Android DDMS位置
- 从调试器里观察到的Observable对象反推出其赋值的源代码位置
- oracle单表存储记录,oracle从各个表获得数据保存到另一个表
- Spring框架之自动装配
- nicescroll.js滚动条错位
- 有关java.lang.ClassNotFoundException报错的总结
- docker版 Transmission以及qbittorrent 下载路径没有权限问题
- 《伯克毕生发展心理学1》
- Python爬虫系列之得物小程序data算法
- 监控摄像机的视频摘要(Video Summarization of Surveillance Cameras)
- Swing Copters摇摆直升机高分攻略,游戏攻略
- 慷宝机器人_慷宝智能管家机器人亮相2018郑州国际地产行业联合采购大会
- Vue项目实战:订单列表页面实现
- mac 装java ecli_Eclipse下Maven安装和配置
- UEFI启动-GPT分区,Windows 7+ 系统引导修复
- Gamemaker studio2经验(4)——打字机效果
热门文章
- Java根据当前时间生成对于的唯一编号(代码案例)
- 无法找到模块“@antv/l7-district”的声明文件。
- iterator 怎么使用甀_迭代器(Iterator)的使用方法
- 江苏南通与苏州间将建跨江城际铁路
- win7命令启动计算机管理,Win7系统电脑如何删除Windows启动管理器选项?
- 网络渗透测试实验——网络扫描与网络侦察
- JSON文件加注释的7种方法
- HTML引入JS的两种方法
- C++学习笔记:const和mutable的多种用法【Cherno】
- Loadrunner windows socket 协议简解