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

首先介紹Puppeteer

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

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

使用Puppeteer，至關於同時具備Linux和Chrome的能力，應用場景會很是多。就爬蟲領域來講，遠比通常的爬蟲工具功能更豐富，性能分析、自動化測試也不在話下，今天先探討爬蟲相關

Puppeteer官方文檔請猛戳這裏

Puppeteer 核心功能

1. 利用網頁生成PDF、圖片
2. 爬取SPA應用，並生成預渲染內容（即「SSR」 服務端渲染）
3. 能夠從網站抓取內容
4. 自動化表單提交、UI測試、鍵盤輸入等
5. 幫你建立一個最新的自動化測試環境（chrome），能夠直接在此運行測試用例
6. 捕獲站點的時間線，以便追蹤你的網站，幫助分析網站性能問題

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

1. 使用puppeteer.launch()運行puppeteer，他會return一個promise，使用then方法獲取browser實例，Browser API猛擊這裏
2. 拿到browser實例後，經過browser.newPage()方法，能夠獲得一個page實例， 猛戳 Page API
3. 使用page.goto()方法，跳轉至ES6標準入門
4. 在page.evaluate()方法中註冊回調函數，並分析dom結構，從下圖能夠進行詳細分析，並經過document.querySelectorAll('ol li a')拿到文章的全部連接
5. 拿到全部連接以後，依次爬取各個頁面（也能夠promise all同時抓取多個頁面），使用page.pdf()方法打印當前頁面

6. 核心代碼以下

   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很粗糙，應該不會對阮老師產生什麼影響，若有問題能夠第一時間聯繫我....