基于Puppeteer实现地图打印输出
来源:互联网 发布:博弈矩阵怎么看 编辑:程序博客网 时间:2024/06/13 21:44
一 Puppeteer简介
Puppeteer.js是谷歌官方推出的一个nodejs库,它提供了一组用来操纵Chrome的API(默认headless也就是无UI的chrome,也可以配置为有UI),有点类似于PhantomJS,但Puppeteer是Chrome官方团队进行维护的,前景更好。使用Puppeteer,相当于同时具有Linux和Chrome的能力,应用场景会非常多。就爬虫领域来说,远比一般的爬虫工具功能更丰富,性能分析、自动化测试也不在话下。官方列出的主要功能如下:
* 利用网页生成PDF、图片
* 爬取SPA应用,并生成预渲染内容(即“SSR” 服务端渲染)’
* 可以从网站抓取内容
* 自动化表单提交、UI测试、键盘输入等
* 帮你创建一个最新的自动化测试环境(chrome),可以直接在此运行测试用例
* 捕获站点的时间线,以便追踪你的网站,帮助分析网站性能问题
安装如下很简单:
npm install puppeteer
二 输出地图图片
在工程项目中,常常有导出地图图片保存的需求,这种需求很多时候,直接在前端canvas渲染图片导出即可,参考:OpenLayers3关于Map Export的Canvas跨域,但很多时候,Map的Layer来源很多,有公网第三方网站的,有工程自己服务器的,并不是每个地图服务器都支持cors操作,canvas渲染常常无法使用,而使用服务端请求出图也是一种可选方案。
测试以本地的一个web页面为准:
废话不多说,直接上代码:
const puppeteer = require('puppeteer');(async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); //登录地图网页 await page.goto('http://localhost:63342/%E7%89%B9%E6%95%88demo/Gansu.html'); //根据页面上下文,获取map div的宽高 let result = await page.evaluate((divid) => { let mapdiv=document.querySelector(`#${divid}`); let width= parseInt(mapdiv.offsetWidth); let height=parseInt(mapdiv.offsetHeight); return Promise.resolve([width,height]); }, 'map'); console.log(result); //等待1.2秒 await sleep(1200); //print png await page.screenshot({ path: 'clickbd.png', //fullPage与clip使用时互斥 //fullPage: true, //整页输出 //只clip出map div的范围输出地图 clip:{ x:0, y:0, width:result[0], height:result[1] } }); browser.close();})();function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms));}
以上代码保存为工程中,起名叫print.js,然后执行:
node print.js
等待之后,输出结果如下:
本文只简单介绍下Puppeteer,可以预见,将来会越来越火,毕竟是chrome官方维护的库,比同类产品牌子更大。
- 基于Puppeteer实现地图打印输出
- 爬取并打印《ES6标准入门》PDF--Puppeteer初探
- jQuery实现打印输出字体
- web端输出打印地图(ArcGIS api for Javascript)一、地图打印模板的制作
- ArcGIS Engine下实现地图输出
- ArcGIS Engine下实现地图输出
- 地图打印
- java 实现打印输出一个空心菱形
- C语言实现颜色打印输出
- Node.js实现歌词打印输出
- 基于百度地图API实现的地图形式天气预报【一】
- 基于百度地图API实现的地图形式天气预报【二】
- 基于百度地图API实现的地图形式天气预报
- 基于百度地图API实现的地图形式天气预报【二】
- 基于mAppWidget实现手绘地图–去掉试用版地图水印
- 基于mAppWidget实现手绘地图(一)--简介
- 基于mAppWidget实现手绘地图(二)--概要
- 基于mAppWidget实现手绘地图--索引&DEMO
- iPhoneX下拉特效
- 博客使用到的公共图片
- CCF 201604-1 折点计数
- 从word中拷贝代码到vc中空格出现错误解决
- Java根据日期取得星期几
- 基于Puppeteer实现地图打印输出
- 银根收不收的逻辑
- leetcode 149. Max Points on a Line
- Alfred3 无法激活workflows解决方法
- LeetCode题库——AddTwoNumbers
- LAMP环境搭建系列之三:编译安装Apache httpd 2.4.29
- 【云星数据---Apache Flink实战系列(精品版)】:Apache Flink高级特性与高级应用020-Flink中参数传递和容错设定004
- DB2常用函数
- mysql启动脚本——指定数据目录并指定配置文件