Laravel 中使用 puppeteer 采集異步加載的網頁內容

sixleaves 發布于2019-06-28 18:46 / 3489人閱讀

摘要：采集網頁內容是一項很常見的需求，比較傳統的靜態頁面，就能搞定。代碼中使用了一個方法，是為了讓內容加載完成后再進行截圖，簡單粗暴，可能不是最好的解決辦法。總結被應用于測試采集等場景，是一個非常有力的工具。

采集網頁內容是一項很常見的需求，比較傳統的靜態頁面，curl 就能搞定。但如果頁面中有動態加載的內容，比如有些頁面里通過 ajax 加載的文章正文內容，又如果有些頁面加載完成后進行了一些額外處理（圖片地址替換等等……）而你想采集這些處理過后的內容。那么牛逼閃閃的 curl 也束手無策了。

做過類似需求的人可能會說，老鐵，上 PhantomJS 啊！

沒錯，這是一個辦法，而且在相當長的時間里 PhantomJS 是為數不多的能解決這類需求的工具里的佼佼者。

但今天這里要介紹的是一個后來居上的工具 -- puppeteer，它是隨著 Chrome Headless 技術興起而快速發展起來的。而且非常關鍵的是，puppeteer 由 Chrome 的官方團隊開發和維護，可以說相當靠譜了！

puppeteer 是一個 js 包，要想在 Laravel 中使用，得借助于另一神器spatie/browsershot。

安裝

安裝 spatie/browsershot

browsershot 是一個 composer 包，出自于大神團隊 spatie

$ composer require spatie/browsershot

安裝 puppeteer

$ npm i puppeteer --save

也可以全局安全 puppeteer 但就個人經驗而言，在項目中安裝是比較推薦的做法，因為這樣不同項目不會同時受全局安裝的 puppeteer 影響，此外項目中安裝也方便使用 phpdeployer 進行升級（phpdeploy 升級時不會影響線上項目運行，要知道升級/安裝 puppeteer 可是很費時的，有時候還不能保證一次成功）。

安裝 puppeteer 時會下載 Chromium-Browser，鑒于咱特殊國情，很有可能出現無法下載的情況，對此，就請大家各顯神通吧……

使用

以采集今日頭條手機版頁面文章內容為例。

use SpatieBrowsershotBrowsershot;

public function getBodyHtml()
{
    $newsUrl = "https://m.toutiao.com/i6546884151050502660/";
    
    $html = Browsershot::url($newsUrl)
        ->windowSize(480, 800)
        ->userAgent("Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Mobile Safari/537.36")
        ->mobile()
        ->touch()
        ->bodyHtml();

    Log::info($html);
}

運行后可以在日志中看到如下內容（截圖中只是其中部分）

此外，也可以將頁面保存為圖片或 PDF 文件。

use SpatieBrowsershotBrowsershot;

public function getBodyHtml()
{
    $newsUrl = "https://m.toutiao.com/i6546884151050502660/";
    
    Browsershot::url($newsUrl)
        ->windowSize(480, 800)
        ->userAgent("Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Mobile Safari/537.36")
        ->mobile()
        ->touch()
        ->setDelay(1000)
        ->save(public_path("images/toutiao.jpg"));
}

圖片里那些框與系統字體有關。代碼中使用了一個 setDelay() 方法，是為了讓內容加載完成后再進行截圖，簡單粗暴，可能不是最好的解決辦法。

可能出現的問題

系統得支持 Chromium 瀏覽器，當然現在絕大部分瀏覽器是支持的，要不然也沒法，還是用 PhantomJS 吧。

項目中安裝了 puppeteer 后調用時有可能出現權限問題，這就需要對項目下 /node_modules/puppeteer 目錄賦予適當的權限。

總結

puppeteer 被應用于測試、采集等場景，是一個非常有力的工具。對于輕度的采集任務，是夠用的，比如本文這類在 Laravel (php) 里來用采集一些小頁面，但如果需要快速采集大量內容，還是 Python 啥的吧。

GPU云服務器云服務器 listview的異步加載異步加載js的方法 js獲取異步加載的數據格式異步采集

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

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

前端每周清單第 48 期：Slack Webpack 構建優化，CSS 命名規范與用戶追蹤，Vue.

摘要：發布是由團隊開源的，操作接口庫，已成為事實上的瀏覽器操作標準。本周正式發布，為我們帶來了，，支持自定義頭部與腳部，支持增強，兼容原生協議等特性變化。新特性介紹日前發布了大版本更新，引入了一系列的新特性與提升，本文即是對這些變化進行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...

sean 2019-08-22 13:57 評論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