抓取网页生成 PDF
看到自己喜欢的在线文档,是不是总想保存下来慢慢学习。可是苦于没有现成的工具,这里我来介绍两个 JS 类库,只需要简单封装一下,从此想抓哪里抓哪里。
一、使用 Phantomjs
1.简单使用
1 const phantom = require('phantom'); 2 (async function() { 3 const instance = await phantom.create(); 4 const page = await instance.createPage(); 5 await page.on('onResourceRequested', function(requestData) { 6 console.info('Requesting', requestData.url); 7 }); 8 const status = await page.open('http://jartto.wang'); 9 await page.render('jarttoTest.pdf'); 10 await instance.exit(); 11 })();
上面是一个完整的示例,我们来看看最核心的部分,不妨放大一下:
1 page.open(address, function (status) { 2 if (status !== 'success') { 3 // --- Error opening the webpage --- 4 console.log('Unable to load the address!'); 5 } else { 6 // --- Keep Looping Until Render Completes --- 7 window.setTimeout(function () { 8 page.render(output); 9 phantom.exit(); 10 }, 200); 11 } 12 });
嗯,结合起来,就完美了。下面就是最佳实践:
1 var page = require('webpage').create(); 2 page.open('http://jartto.wang', function(status) { 3 setTimeout(function() { 4 if ( status === 'success' ) { 5 page.render('test.png'); 6 phantom.exit(); 7 } else { 8 console.log('Page failed to load.'); 9 } 10 }, 200); 11 });
因为 open 操作会有响应时间,所以需要使用 setTimeout 来确保流程。
这里需要额外补充一点,如果需要检测 UA
,那么你需要这么使用:
1 var page = require('webpage').create(); 2 page.userAgent = 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36'; 3 page.open('https://securelearning.in', function() { 4 page.render('image.png'); 5 phantom.exit(); 6 });
这里就不再细说了,更多细节可以查看 Demo。
二、使用 Puppeteer
既然 Phantomjs 这么好用,为啥还要了解 Puppeteer ?
提到这个问题,我们不得不来说一下 Puppeteer
强大的官方背景:Puppeteer(木偶) 英[ˌpʌpɪˈtɪə(r)],美[ˌpʌpɪˈtɪr],是 Google Chrome
团队官方的无界面 (Headless)Chrome
工具。所以不管从以后的发展还是完整性方面,Puppeteer
都是我们的首选。
那么,Puppeteer
能用来干啥,有哪些功能:
- 生成页面的截图和
PDF
- 爬取网站内容
- 模拟登陆、自动提交表单,
UI
测试,键盘输入等 - 使用最新的
JavaScript
和浏览器功能,直接在最新版本的Chrome
中运行测试。 - 捕获网站的时间线跟踪,以帮助诊断性能问题
- 测试
Chrome
扩展程序
说了这么多,让我们快速开始,迅速的体验一把。
1.安装
1 npm i puppeteer
2.注意事项
安装并不会那么顺利,因为要依赖 Chromium ,所以你可能会遇到这样的异常。
Note: When you install Puppeteer, it downloads a recent version of Chromium (~170MB Mac, ~282MB Linux, ~280MB Win) that is guaranteed to work with the API. To skip the download, see Environment variables.
正确姿势:
1 set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 2 npm i puppeteer 3 # 或者忽略依赖脚本安装 jartto's demo 4 npm i --save puppeteer --ignore-scripts
如果不能翻墙下载,那么就手动去官网下载 Chromium
吧。当然,坑远不止这些,感兴趣的童鞋可以戳这里 Puppeteer 异常处理。
3.下载核心包
1 npm i puppeteer-core
从 1.7 版本开始发布 puppeteer-core
,他默认不会下载 Chromium
。puppeteer-core
使用已安装的浏览器 或远程浏览器。具体可以查看官网文档 puppeteer vs puppeteer-core
.
4.示例
生成网站快照:
1 const puppeteer = require('puppeteer'); 2 (async () => { 3 const browser = await puppeteer.launch(); 4 const page = await browser.newPage(); 5 await page.goto('http://jartto.wang'); 6 await page.screenshot({path: 'blog.png'}); 7 await browser.close(); 8 })();
通过网站地址,生成 pdf
:
1 const puppeteer = require('puppeteer'); 2 (async () => { 3 const browser = await puppeteer.launch(); 4 const page = await browser.newPage(); 5 await page.goto('https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pdf', {waitUntil: 'networkidle2'}); 6 await page.pdf({path: 'jartto.pdf', format: 'A4'}); 7 await browser.close(); 8 })();
设置视口:
1 await page.setViewport({width: 1024, height: 880});
设置 cookie
:
1 const COOKS =[ 2 { 3 'domain': 'jartto.wang', 4 'name': 'user', 5 'value': 'jartto', 6 } 7 ] 8 await page.setCookie(...COOKS);
模拟设备 iphonex 来生成截图:
1 const devices = require('puppeteer/DeviceDescriptors'); 2 const puppeteer = require('puppeteer'); 3 (async () => { 4 //创建浏览器示例对象 5 const browser = await puppeteer.launch({ 6 executablePath: 'chromium/Chromium.app/Contents/MacOS/Chromium', 7 headless: true 8 }); 9 // 通过浏览器实例 Browser 对象创建页面 Page 对象 10 const page = await browser.newPage(); 11 await page.emulate(devices['iPhone X']); 12 await page.goto('http://jartto.wang'); 13 await page.screenshot({path: 'temp/iphonex.png'}); 14 15 await browser.close(); 16 })().catch(error => console.log('error: ', error.message));
如果是本地的 chromium ,记得配置 executablePath: ‘chromium/Chromium.app/Contents/MacOS/Chromium’。
更有趣的事情是,我们可以搜索一些关键字来生成快照,譬如:
1 const devices = require('puppeteer/DeviceDescriptors') 2 const puppeteer = require('puppeteer'); 3 (async () => { 4 const browser = await puppeteer.launch({ 5 executablePath: 'chromium/Chromium.app/Contents/MacOS/Chromium', 6 headless: true 7 }); 8 const page = await browser.newPage(); 9 await page.emulate(devices['iPhone X']); 10 await page.goto('https://www.baidu.com/'); 11 // 输入框 id,搜索关键字 jartto 12 await page.type('#index-kw', 'jartto'); 13 // 模拟点击提交按钮 14 await page.click('#index-bn'); 15 // 跳转等待时间 16 await page.waitForNavigation({ timeout: 3000 }); 17 await page.screenshot({path: 'temp/search.png'}); 18 await browser.close(); 19 })().catch(error => console.log('error: ', error.message));
执行上面的代码,将会打开百度搜索引擎,同时搜索关键字 jartto
,跳转完成后进行截屏,保存成图片。核心代码:
1 // 输入框 id,搜索关键字 jartto 2 await page.type('#index-kw', 'jartto'); 3 // 模拟点击提交按钮 4 await page.click('#index-bn'); 5 // 跳转等待时间 6 await page.waitForNavigation({ timeout: 3000 });
一定要找准对应元素的 id,我们可以使用 chrome 开发者工具切换手机模式查看元素。
实际效果一览,左图为 blog 快照,右图为搜索跳转快照:
如果觉得例子还不够,这里有个在线演示,以及我自己写的 Demo。
5.相关资源
学习资源总是很多,由浅入深的学习将会事半功倍,下面我稍微整理一下。
- 第一阶段
- 在线 DEMO
- 了解 Puppeteer
- Puppeteer入门及实践
- Chromium 下载跳坑
- 通过 Puppeteer 生成 PDF 文件
- 第二阶段
- 深入 Puppeteer
- Puppeteer 异常处理
- 第三阶段
- 中文文档
- Puppeteer API
循序渐进的开始你的学习旅程吧。
三、总结
文章提供了两种方式,在线抓取 URL
生成 PDF
,当然插件的功能并不简单如此,你还可以做更多有趣的事情。嗯,慢慢摸索、积累,相信我,总有一天你会用上的。
文章首发于 Jartto's blog
转载于:https://www.cnblogs.com/wind-alex/p/10375365.html
抓取网页生成 PDF相关推荐
- python抓取网页内容到excel_Python实现抓取网页生成Excel文件的方法示例
本文实例讲述了Python实现抓取网页生成Excel文件的方法.分享给大家供大家参考,具体如下: Python抓网页,主要用到了PyQuery,这个跟jQuery用法一样,超级给力 示例代码如下: # ...
- java抓取动态生成的网页
最近在做项目的时候有一个需求:从网页面抓取数据,要求是首先抓取整个网页的html源码(后期更新要使用到).刚开始一看这个简单,然后就稀里哗啦的敲起了代码(在这之前使用过Hadoop平台的分布式爬虫框架 ...
- 怎样用java编程抓取动态生成的网页
最近在做项目的时候有一个需求:从网页面抓取数据,要求是首先抓取整个网页的html源码(后期更新要使用到).刚开始一看这个简单,然后就稀里哗啦的敲起了代码(在这之前使用过Hadoop平台的分布式爬虫框架 ...
- cookie追加数据_集算器 SPL 抓取网页数据
[摘要] 集算器 SPL 支持抓取网页数据,根据抓取定义规则,可将网页数据下载到在本地进行统计分析.具体定义规则要求.使用详细情况,请前往乾学院:集算器 SPL 抓取网页数据! 网站上的数据源是我们进 ...
- 使用Python抓取网页信息
之前用C#帮朋友写了一个抓取网页信息的程序,搞得好复杂,今天朋友又要让下网页数据,好多啊,又想偷懒,可是不想用C#了,于是想到了Python,大概花了两个小时,用记事本敲的,然后在IDLE (Pyth ...
- Python 爬虫篇#笔记02# | 网页请求原理 和 抓取网页数据
目录 一. 网页请求原理 1.1 浏览网页的过程 1.2 统一资源定位符URL 1.3 计算机域名系统DNS 1.4 分析浏览器显示完整网页的过程 1.5 客户端THHP请求格式 1.6 服务端HTT ...
- Linux 抓取网页实例(shell+awk)
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 上一篇博 ...
- 实践指南-网页生成PDF
点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 一.背景 开发工作中,需要实现网页生成 PDF 的功能,生成的 PDF 需上传至服务端,将 PDF 地址作为参数请求外部接口,这个转换过程 ...
- 抓取网页数据并解析Android
抓取网页数据并解析 标签: 网页抓取jsoupAndroid 2016-03-02 13:54 1262人阅读 评论(1) 收藏 举报 分类: Android开发(原创)(7) 版权声明:本文为博 ...
最新文章
- 蓝桥杯省赛最短路径-模板
- JavaFX官方教程(十二)之树动画示例
- Fiddler在PC/台式对Android进行抓包
- java 界面输出控制台信息,java 怎么获取控制台的数据并且输出到GUI上
- 一根烟上热搜,先让 AI 看看你的肺
- 简单解释什么是 依赖注入 和 控制反转 1
- (秒杀项目) 4.9 削峰限流与防刷(核心)
- Bootstrap模态框中再嵌套模态框导致第一个模态框的滚动条消失
- 世界排名第一的免费开源CRM客户关系管理系统介绍
- LINUX系统开机后出现assuming drive cache:write through* 无法开机
- 电脑显示器连接主机 没反应 no signal!!
- 格式化后如何修复损坏的JPEG文件?
- Sentinel控制台设置限流规则
- 西安外国语大学计算机语言学,2017年西安外国语大学语言学及应用语言学832现代汉语考研题库...
- 属于拼多多的巴别塔正在构筑
- 2022年第十二届APMCM亚太杯1月增赛E题思路分享
- 工作票应一式两份 用计算机,工作票应使用统一的票面格式,釆用()、()或()填写,至少一式两份。...
- Docker之docker设置系统的环境变量
- 移讯云短信系统专业版功能介绍|客户通道选择短信平台开发
- 知识点02、2022版MyBatisPlus教程(一套玩转mybatis-plus) - 2.02-MyBatis-Plus特性
热门文章
- 创意01:网上3D试衣间
- Js如何实现收藏功能
- 钱多多第二阶段冲刺06
- Java学习日记Day21
- 多账户交易PAMM / MAM
- 双向链表增删改查C语言代码,C语言中双向链表的增删改查输出源文件代码
- 华为nova7se能云闪付吗_vivoS7和华为nova7se哪个好?自拍手机该如何抉择!
- ThinkPHP V5.0.5漏洞_Google Chrome谷歌浏览器V80.0.3987.122离线安装包
- Springboot实战项目---从需求分析到项目部署一站式开发,给简历添加一点色彩
- 亚马逊 ec2 连接不上_在Amazon EC2上设置WordPress