Puppeteer初探--爬取并生成《ES6標準入門》PDF

JerryWangSAP 發布于2019-08-21 12:00 / 1556人閱讀

摘要：首先介紹是一個庫，他提供了一組用來操縱的默認也就是無的，也可以配置為有有點類似于，但是官方團隊進行維護的，前景更好。使用，相當于同時具有和的能力，應用場景會非常多。

首先介紹Puppeteer

Puppeteer是一個node庫，他提供了一組用來操縱Chrome的API（默認headless也就是無UI的chrome，也可以配置為有UI）

有點類似于PhantomJS，但Puppeteer是Chrome官方團隊進行維護的，前景更好。

使用Puppeteer，相當于同時具有Linux和Chrome的能力，應用場景會非常多。就爬蟲領域來說，遠比一般的爬蟲工具功能更豐富，性能分析、自動化測試也不在話下，今天先探討爬蟲相關

Puppeteer官方文檔請猛戳這里

Puppeteer 核心功能

利用網頁生成PDF、圖片

爬取SPA應用，并生成預渲染內容（即“SSR” 服務端渲染）

可以從網站抓取內容

自動化表單提交、UI測試、鍵盤輸入等

幫你創建一個最新的自動化測試環境（chrome），可以直接在此運行測試用例

捕獲站點的時間線，以便追蹤你的網站，幫助分析網站性能問題

OK，基本熟悉之后，接下來進行爬蟲教學：

使用puppeteer.launch()運行puppeteer，他會return一個promise，使用then方法獲取browser實例，Browser API猛擊這里

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

使用page.goto()方法，跳轉至ES6標準入門

在page.evaluate()方法中注冊回調函數，并分析dom結構，從下圖可以進行詳細分析，并通過document.querySelectorAll("ol li a")拿到文章的所有鏈接

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

核心代碼如下

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可能吃緊，謹慎操作
    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...

效果如下，這里簡述幾個需要注意的問題：

如果在page go之后馬上進行pdf抓取，此時頁面還未完成渲染，只能抓到loading圖（如下），所以用timeout做了簡單點處理

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

最后聲明，生成的PDF很粗糙，應該不會對阮老師產生什么影響，如有問題可以第一時間聯系我....

GPU云服務器云服務器 ES6入門 python爬取入門 pdf生成生成pdf

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87335.html

Puppeteer 初探

摘要：抓取并生成預先呈現的內容即。自動表單提交，測試，鍵盤輸入等。創建一個最新的自動化測試環境。使用最新的的和瀏覽器功能，直接在最新版本的瀏覽器中運行測試。捕獲您網站的時間線跟蹤，以幫助診斷性能問題。木偶 Puppeteer 更友好的 Headless Chrome Node API木偶也是有心的 (=?ω?=) showImg(https://segmentfault.com/img/b...

oysun 2019-08-22 18:14 評論0 收藏0
使用Node.js爬取任意網頁資源并輸出高質量PDF文件到本地~

摘要：上面只爬取了京東首頁的圖片內容，假設我的需求進一步擴大，需要爬取京東首頁中的所有標簽對應的跳轉網頁中的所有的文字內容，最后放到一個數組中。 showImg(https://segmentfault.com/img/bVbtVeV?w=3840&h=2160); 本文適合無論是否有爬蟲以及Node.js基礎的朋友觀看~ 需求：使用Node.js爬取網頁資源，開箱即用的配置將爬取到的...

seasonley 2019-08-30 11:12 評論0 收藏0
使用Node.js爬取任意網頁資源并輸出高質量PDF文件到本地~

摘要：上面只爬取了京東首頁的圖片內容，假設我的需求進一步擴大，需要爬取京東首頁中的所有標簽對應的跳轉網頁中的所有的文字內容，最后放到一個數組中。 showImg(https://segmentfault.com/img/bVbtVeV?w=3840&h=2160); 本文適合無論是否有爬蟲以及Node.js基礎的朋友觀看~ 需求：使用Node.js爬取網頁資源，開箱即用的配置將爬取到的...

xiaoxiaozi 2019-08-02 15:18 評論0 收藏0
使用Node.js爬取任意網頁資源并輸出高質量PDF文件到本地~

摘要：上面只爬取了京東首頁的圖片內容，假設我的需求進一步擴大，需要爬取京東首頁中的所有標簽對應的跳轉網頁中的所有的文字內容，最后放到一個數組中。 showImg(https://segmentfault.com/img/bVbtVeV?w=3840&h=2160); 本文適合無論是否有爬蟲以及Node.js基礎的朋友觀看~ 需求：使用Node.js爬取網頁資源，開箱即用的配置將爬取到的...

wangym 2019-08-23 18:07 評論0 收藏0