玩玩puppeteer，實現一個小‘爬蟲’

CoorChice 發布于2019-08-22 18:32 / 3513人閱讀

摘要：獲取實例獲取瀏覽器頁面實例鏈接到百度首頁截屏將截屏按時間戳保存到指定路徑下。關閉然后執行命令最后在文件指定路徑下生成百度首頁的截屏。

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爬蟲爬蟲小工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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