玩玩puppeteer，实现一个小‘爬虫’

CoorChice 发布于2019-08-22 18:32 / 3497人阅读

摘要：获取实例获取浏览器页面实例链接到百度首页截屏将截屏按时间戳保存到指定路径下。关闭然后执行命令最后在文件指定路径下生成百度首页的截屏。

Puppeteer

puppeteer官网

一、puppeteer是干什么的？

引用puppeteer官网解释： Most things that you can do manually in the browser can be done using Puppeteer!

生成页面的屏幕截图和PDF。

抓取SPA并生成预渲染内容（即“SSR”）。

自动表单提交，UI测试，键盘输入等。

创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能直接在最新版本的Chrome中运行测试。

捕获您网站的[时间线跟踪]

二、常用API



page.setViewport() 设置获取屏幕大小，默认获取屏幕大小为800px * 600px

page.pdf(路径，大小) 保存为pdf格式图片
举例：page.pdf({path: "hn.pdf", format: "A4"});



page.evaluate(fn) 执行chrome的api

举例：
 await page.evaluate(() => {
     return {
         width: document.documentElement.clientWidth,
         height: document.documentElement.clientHeight,
    deviceScaleFactor: window.deivcePixelRatio
    };        
})



puppeteer.launch({headless: false}); 打开浏览器，默认值是true

更多API

三、举个栗子：截取屏幕 3.1 代码

const puppeteer = require("puppeteer");
// 引用default.js的sceenshot路径，将截取的屏幕pdf保存到该路径下。
const { screenshot } = require("./config/default.js");

(async () => {
  // 获取browser实例
  const browser = await puppeteer.launch();
  // 获取浏览器tab页面实例
  const page = await browser.newPage();
  // 链接到百度首页
  await page.goto("https://www.baidu.com");
  // 截屏
  await page.screenshot({
    // 将截屏按时间戳保存到指定路径下。
    path: `${screenshot}/${Date.now()}.png`
  });
  // 关闭
  await browser.close();
})();

3.2 然后执行命令

node src/screenshot.js

3.3 最后在screenshot文件指定路径下生成百度首页的截屏。 四、爬取百度图片列表 4.1 实现思路

模拟用户打开浏览器

模拟打开tab页

模拟前往百度图片页面

模拟focus到输入框，输入查询值, 点击查询按钮

抓取图片

通过writeFile，将图片下载到指定路径下。

4.2 目录结构

.
|-mn
|-src
|   |-config
|   |    |-default.js     
|   |-helper
|   |    |-srcToImg.js
|   |-mn.js
|-package.json

4.3 mn.js 主文件

const puppeteer = require("puppeteer");
const { mn } = require("./config/default");
const srcToImg = require("./helper/srcToImg");
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://image.baidu.com");
  console.log("go to https://image.baidu.com");
  await page.setViewport({
    width: 1920,
    height: 1080
  });
  console.log("reset viewport");
  await page.focus("#kw");
  await page.keyboard.sendCharacter("狗");
  await page.click(".s_search");
  console.log("go to search list");
  page.on("load", async () => {
    console.log("page loading done, start fetch ...");
    const srcs = await page.evaluate(() => {
      const images = document.querySelectorAll("img.main_img");
      return Array.prototype.map.call(images, img => img.src);
    });
    console.log(`get ${srcs.length} image, start download`);
    
    srcs.forEach(async (src) => {
      await srcToImg(src, mn);
    });
    await browser.close();
  })
})();

4.4 default.js 路径

const path = require("path");
module.exports = {
  screenshot: path.resolve(__dirname, "../../screenshot"),
  mn: path.resolve(__dirname, "../../mn")
}

4.5 srcToImg.js 解析图片地址

const http = require("http");
const https = require("https");
const fs = require("fs");
const path = require("path");
const { promisify } = require("util");
const writeFile = promisify(fs.writeFile);

module.exports = async(src, dir) => {
  if(/.(jpg|png|gif)$/.test(src)) {
    await urlToImg(src, dir);
  }else {
    await base64ToImg(src, dir); 
  }
}

// 识别src为http或者https的图片
const urlToImg = promisify((url, dir, callback) => {
  const mod = /^https:/.test(url) ? https : http;
  const ext = path.extname(url);
  const file = path.join(dir, `${Date.now()}${ext}`);
  mod.get(url, res => {
    res.pipe(fs.createWriteStream(file))
      .on("finish", () => {
        callback();
        console.log(file);
      })
  })
})

// 识别src为base64地址的图片
const base64ToImg = async (base64Str, dir) => {
  // data: image/jpeg;base64,/raegreagearg
  const matchs = base64Str.match(/^data:(.+?);base64,(.+)$/);
  try {
    const ext = matches[1].split("/")[1]
      .replace("jpeg", "jpg");
    const file = path.join(dir, `${Date.now()}.${ext}`);
    await writeFile(file, match[2], "base64");
    console.log(file);
  } catch (ex) {
    console.log("非法 base64 字符串");
  }
}

4.6 最终在mn文件夹中存入爬取到的图片。

go to https://image.baidu.com
reset viewport
go to search list
page loading done, start fetch ...
get 46 image, start download
非法 base64 字符串
非法 base64 字符串
非法 base64 字符串
非法 base64 字符串
非法 base64 字符串
非法 base64 字符串
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351397.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351396.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351398.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351400.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351405.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351386.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351399.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351405.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351405.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351402.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351412.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351413.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351403.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351398.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351399.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351403.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351406.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351401.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351408.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351404.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351414.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351400.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351402.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351413.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351408.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351414.jpg
/Users/lius/Desktop/web spider/headless-crawler/headless_crawler/mn/1530800351413.jpg
......

4.7 mn文件夹下

GPU云服务器云服务器如何写一个爬虫网络爬虫实现写一个python爬虫爬虫小工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95981.html

Koa2 + Mongo + 爬虫搭建小说微信小程序（本地开发篇）

摘要：前言根据慕课网实现电影微信公众号前后端开发学习后的改造由于上下班期间会看会小说，但是无奈广告太多，还要收费，于是结合课程，进行开发，并上传到自己的微信小程序。前言：根据慕课网 Koa2 实现电影微信公众号前后端开发学习后的改造由于上下班期间会看会小说，但是无奈广告太多，还要收费，于是结合课程，进行开发，并上传到自己的微信小程序。 showImg(https://segment...

Kross 2019-08-23 14:15 评论0 收藏0
Koa2 + Mongo + 爬虫搭建小说微信小程序（本地开发篇）---编码时遇到的问题

摘要：更新于利用重构了下此项目，有兴趣的可以参考看看，传送门首先感谢作者的分享，很赞，原文地址这里记录下编码遇到的问题，这里只针对进行了验证。更新于 2019-01-02 利用 eggjs 重构了下此项目，有兴趣的可以参考看看，传送门首先感谢作者的分享，很赞~，原文地址这里记录下编码遇到的问题，这里只针对 sever 进行了验证。有同样遇到问题的童鞋，可以作为参照~ 本地环境： ...

liangdas 2019-08-23 14:16 评论0 收藏0
puppeteer爬虫

摘要：利用空闲时间，学习了下爬虫，我也想爬取下网上的资源部分参数名称参数类型参数说明在请求的过程中是否忽略报错信息，默认为是否以无头的模式运行，也就是不显示，默认为可执行文件的路径，默认是使用它自带的如果你想指定一个自己的路径，可以通过这个参数设利用空闲时间，学习了下puppeteer爬虫，我也想爬取下网上的资源 1.部分api puppeteer.launch(options) 参数...

scola666 2019-08-23 18:26 评论0 收藏0
手把手教你如何用Crawlab构建技术文章聚合平台(一)

摘要：本文将介绍如何使用和抓取主流的技术博客文章，然后用搭建一个小型的技术文章聚合平台。是谷歌开源的基于和的自动化测试工具，可以很方便的让程序模拟用户的操作，对浏览器进行程序化控制。相对于，是新的开源项目，而且是谷歌开发，可以使用很多新的特性。背景说到爬虫，大多数程序员想到的是scrapy这样受人欢迎的框架。scrapy的确不错，而且有很强大的生态圈，有gerapy等优秀的可视化界面。但...

LinkedME2016 2019-08-23 15:57 评论0 收藏0
手把手教你如何用Crawlab构建技术文章聚合平台(一)

摘要：本文将介绍如何使用和抓取主流的技术博客文章，然后用搭建一个小型的技术文章聚合平台。是谷歌开源的基于和的自动化测试工具，可以很方便的让程序模拟用户的操作，对浏览器进行程序化控制。相对于，是新的开源项目，而且是谷歌开发，可以使用很多新的特性。背景说到爬虫，大多数程序员想到的是scrapy这样受人欢迎的框架。scrapy的确不错，而且有很强大的生态圈，有gerapy等优秀的可视化界面。但...

Jeffrrey 2019-07-31 10:10 评论0 收藏0