puppeteer 多URL爬取

時間 2019-11-16

原文原文鏈接

基本使用

'use strict';
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  let imgArr = [];
  page.on('domcontentloaded', async () => {
    imgArr = await page.$$eval('img', img => {
      const arr = [];
      // 返回的是一個集合須要從新遍歷
      for (let i = 0; i < img.length; i++) {
        const obj = {
          width: img[i].width,
          naturalWidth: img[i].naturalWidth,
          height: img[i].height,
          naturalHeight: img[i].naturalHeight,
          isStandard: !((img[i].width * 10 <= img[i].naturalWidth || img[i].height * 10 <= img[i].naturalHeight)),
          url: img[i].src,
          level: 3,
          imageUrl: img[i].src,
          describeUrl: '',
          summary: `爲了顯示${img[i].width}x${img[i].height}的圖片引入了原尺寸爲${img[i].naturalWidth}x${img[i].naturalHeight}的圖片`,
        };
        if (obj.width && obj.height) {
          arr.push(obj);
        }
      }
      return arr;
    });
  });
  await page.goto('https://www.npmjs.com/package/puppeteer', { waitUntil: 'networkidle0' });
  await browser.close();
  console.log('imgArr: ', imgArr);
})();

順序不能變：javascript

await puppeteer.launch() 啓動
await browser.newPage() 打開page
page.on 監聽事件
await page.goto 跳轉頁面
await browser.close() 關閉

順序改變,page.on() 監聽事件將沒法監聽html

多個URL的使用方法

爬取數組url上的全部圖片，並返回其真實寬高.java

/* eslint-disable no-undef */
'use strict';
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  let arr = [];

  const html = [ 'https://www.npmjs.com/package/puppeteer', 'https://www.iconfont.cn/search/index?searchType=icon&q=test' ];

  for (let i = 0; i < html.length; i++) {
    await page.goto(html[i], { waitUntil: 'domcontentloaded' });
    await page.waitForSelector('img', { timeout: 3000 });
    // eslint-disable-next-line no-loop-func
    const doms = await page.evaluate(() => {
      const arr = [ ...document.querySelectorAll('img') ];
      return arr.map(v => {
        return {
          naturalWidth: v.naturalWidth,
          naturalHeight: v.naturalHeight,
          width: v.width,
          height: v.height,
        };
      });
    });
    arr = [ ...arr, ...doms ];
  }
  await browser.close();
})();

此方法大體參考了overflow上的答案：npm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。