Puppeteer初探--爬取并生成《ES6標(biāo)準(zhǔn)入門》PDF

JerryWangSAP 發(fā)布于2019-08-21 12:00 / 1607人閱讀

摘要：首先介紹是一個(gè)庫(kù)，他提供了一組用來操縱的默認(rèn)也就是無的，也可以配置為有有點(diǎn)類似于，但是官方團(tuán)隊(duì)進(jìn)行維護(hù)的，前景更好。使用，相當(dāng)于同時(shí)具有和的能力，應(yīng)用場(chǎng)景會(huì)非常多。

首先介紹Puppeteer

Puppeteer是一個(gè)node庫(kù)，他提供了一組用來操縱Chrome的API（默認(rèn)headless也就是無UI的chrome，也可以配置為有UI）
有點(diǎn)類似于PhantomJS，但Puppeteer是Chrome官方團(tuán)隊(duì)進(jìn)行維護(hù)的，前景更好。
使用Puppeteer，相當(dāng)于同時(shí)具有Linux和Chrome的能力，應(yīng)用場(chǎng)景會(huì)非常多。就爬蟲領(lǐng)域來說，遠(yuǎn)比一般的爬蟲工具功能更豐富，性能分析、自動(dòng)化測(cè)試也不在話下，今天先探討爬蟲相關(guān)

Puppeteer官方文檔請(qǐng)猛戳這里

Puppeteer 核心功能

利用網(wǎng)頁(yè)生成PDF、圖片

爬取SPA應(yīng)用，并生成預(yù)渲染內(nèi)容（即“SSR” 服務(wù)端渲染）

可以從網(wǎng)站抓取內(nèi)容

自動(dòng)化表單提交、UI測(cè)試、鍵盤輸入等

幫你創(chuàng)建一個(gè)最新的自動(dòng)化測(cè)試環(huán)境（chrome），可以直接在此運(yùn)行測(cè)試用例

捕獲站點(diǎn)的時(shí)間線，以便追蹤你的網(wǎng)站，幫助分析網(wǎng)站性能問題

OK，基本熟悉之后，接下來進(jìn)行爬蟲教學(xué)：

使用puppeteer.launch()運(yùn)行puppeteer，他會(huì)return一個(gè)promise，使用then方法獲取browser實(shí)例，Browser API猛擊這里

拿到browser實(shí)例后，通過browser.newPage()方法，可以得到一個(gè)page實(shí)例，猛戳 Page API

使用page.goto()方法，跳轉(zhuǎn)至ES6標(biāo)準(zhǔn)入門

在page.evaluate()方法中注冊(cè)回調(diào)函數(shù)，并分析dom結(jié)構(gòu)，從下圖可以進(jìn)行詳細(xì)分析，并通過document.querySelectorAll("ol li a")拿到文章的所有鏈接

拿到所有鏈接之后，依次爬取各個(gè)頁(yè)面（也可以promise all同時(shí)抓取多個(gè)頁(yè)面），使用page.pdf()方法打印當(dāng)前頁(yè)面

核心代碼如下

puppeteer.launch().then(async browser => {
    let page = await browser.newPage();

    await page.goto("http://es6.ruanyifeng.com/#README");
    await timeout(2000);

    let aTags = await page.evaluate(() => {
      let as = [...document.querySelectorAll("ol li a")];
      return as.map((a) =>{
          return {
            href: a.href.trim(),
            name: a.text
          }
      });
    });

    await page.pdf({path: `./es6-pdf/${aTags[0].name}.pdf`});
    page.close()

    // 這里也可以使用promise all，但cpu可能吃緊，謹(jǐn)慎操作
    for (var i = 1; i < aTags.length; i++) {
      page = await browser.newPage()
      var a = aTags[i];
      await page.goto(a.href);
      await timeout(2000);
      await page.pdf({path: `./es6-pdf/${a.name}.pdf`});
      page.close();
    }

    browser.close();
});

完整代碼訪問 Github

https://github.com/zhentaoo/p...

效果如下，這里簡(jiǎn)述幾個(gè)需要注意的問題：

如果在page go之后馬上進(jìn)行pdf抓取，此時(shí)頁(yè)面還未完成渲染，只能抓到loading圖（如下），所以用timeout做了簡(jiǎn)單點(diǎn)處理

最終爬取效果如下，PDF的尺寸、預(yù)覽效果、首頁(yè)重復(fù)就不做過多整理， 預(yù)覽效果如下,如果想要自己處理，可以設(shè)置一下chrome尺寸，打印頁(yè)數(shù)


最后聲明，生成的PDF很粗糙，應(yīng)該不會(huì)對(duì)阮老師產(chǎn)生什么影響，如有問題可以第一時(shí)間聯(lián)系我....

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/87335.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

JerryWangSAP

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Dedispec：美國(guó)堪薩斯城便宜服務(wù)器促銷/雙 Intel Xeon 5639/16GB/120G

閱讀 3762·2021-08-10 09:42
JSON的作用

閱讀 648·2019-08-30 15:55
前端每日實(shí)戰(zhàn)：68# 視頻演示如何用純 CSS 創(chuàng)作一本色卡

閱讀 947·2019-08-30 15:54
基于html2canvas實(shí)現(xiàn)網(wǎng)頁(yè)保存為圖片及圖片清晰度優(yōu)化

閱讀 3164·2019-08-30 13:45
前端每日實(shí)戰(zhàn)：102# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)小和尚

閱讀 619·2019-08-29 16:23
前端每日實(shí)戰(zhàn)：103# 視頻演示如何用純 CSS 創(chuàng)作一只監(jiān)視眼

閱讀 2048·2019-08-29 16:23
CSS中寬度與高度

閱讀 1047·2019-08-29 15:18
我的es6總結(jié)

閱讀 2328·2019-08-29 12:57

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

Puppeteer初探--爬取并生成《ES6標(biāo)準(zhǔn)入門》PDF

相關(guān)文章