C# 整合 Headless Chrome 的好工具 - Puppeteer Sharp

栏目: Node.js · 发布时间: 5年前

内容简介:在我的工具箱,Headless Chrome 已取代 PhatomJS 成為擷取網頁內容、自動測試及網頁擷圖/轉 PDF 的首選。 之前我都是自己寫程式呼叫 chrome.exe 傳參數執行各項任務,最近發現更方便的選擇。PuppeteerSharp 已放上 NuGet,透過 puppeteersharp 關鍵字就能快速找到它:(它是.NET Standard 2.0 程式庫,專案至少要 .NET 4.6.1+ 或 .NET Core 2.0+ 才能使用)

在我的 工具 箱,Headless Chrome 已取代 PhatomJS 成為擷取網頁內容、自動測試及網頁擷圖/轉 PDF 的首選。 之前我都是自己寫程式呼叫 chrome.exe 傳參數執行各項任務,最近發現更方便的選擇。

Puppeteer Sharp 是 Github 上的 開源專案 ,作者 Darío Kondratiuk 寫了一組 C# API,方便 .NET 開發人員透過 Puppeteer 協定與 Headless Chrome 溝通,操作 Chrome 完成各種任務,省去管理 Process、組裝命令列參數、寫 Socekt 搞通訊協定等苦差事。

PuppeteerSharp 已放上 NuGet,透過 puppeteersharp 關鍵字就能快速找到它:(它是.NET Standard 2.0 程式庫,專案至少要 .NET 4.6.1+ 或 .NET Core 2.0+ 才能使用)

C# 整合 Headless Chrome 的好工具 - Puppeteer Sharp

先說 Puppeteer Sharp 的一項貼心設計:不需在伺服器安裝 Chrome,它會自行下載 Chromium。一來省去部署手續,二來程式用自己專屬的 Chromium 版本,就不會像我一樣,跟使用者共用 Chrome,結果 因自動升級功能遭遇問題

故使用 Puppeteer Sharp 的起手式為:

await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);
Browser browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
   Headless = true
});

BrowserFetcher 負責確認 Chromium 是否已存在,若無則自動從 Internet 下載,檔案預設放在執行檔同目錄下的 .load-chromium 資料夾, 容量約 320MB,故第一次執行時要多等幾秒鐘,之後就不用了。(伺服器不一定能連 Internet,部署時記得將 .load-chromium 資料夾一起複製過去)

C# 整合 Headless Chrome 的好工具 - Puppeteer Sharp

接著透過 Puppeteer.LaunchAsync() 傳入參數,即可建立一個 Headless Chrome 進行操作。

官方網站已提供許多 實用範例 ,像是擷取網頁畫面、轉存 PDF、在網頁加入 HTML、執行 JavaScript 函式比對結果,足夠大家發揮巧思,組裝出各樣花式應用,這裡不再贅述。

Puppeteer Sharp 是 Puppeteer note.js API 的移植版,若要進階活用需深入了解 Puppeteer 指令,以下是一些資源:

最後,來個簡單練習,我用高速公路 1968 即時路況網站當題材,寫一支排程抓取查詢北中南區的即時路況地圖畫面:

C# 整合 Headless Chrome 的好工具 - Puppeteer Sharp

查過原始碼,左上區塊的「全部/北/中/南」按鈕,北中南分別是呼叫 region('N')、region('C') 及 region('P'),故我跳過 await page.ClickAsync("#region_a") 這種直接操作 HTML 元素的做法,改用 await page.EvaluteExpressionAsync("region('N')") 跑 JavaScript 指令操作網頁。

完整範例程式碼如下,補充說明我直接寫成註解,大家直接看 Code 吧。

using PuppeteerSharp;
using System;
using System.Threading;
using System.Threading.Tasks;

namespace PuppetTest
{
    class Program
    {
        static void Main(string[] args)
        {
            Test().Wait();
        }

        static async Task Test()
        {
            try
            {
                await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);
                using (var browser = await Puppeteer.LaunchAsync(new LaunchOptions()
                {
                    Headless = true //偵測時可設定false觀察網頁顯示結果(註:非Headless時不能匯出PDF)
                }))
                {
                    using (var page = await browser.NewPageAsync())
                    {
                        await page.GoToAsync("https://1968.freeway.gov.tw/");
                        //透過SetViewport控制視窗大小決定抓圖尺寸
                        await page.SetViewportAsync(new ViewPortOptions
                        {
                            Width = 1024,
                            Height = 768
                        });

                        foreach (var region in "N,C,P".Split(','))
                        {
                            //呼叫網頁程式方法切換區域
                            await page.EvaluateExpressionAsync($"region('{region}')");
                            //要等待網頁切換顯示完成再抓圖
                            //最精準做法是依程式邏輯檢查AJAX動作是否完成,此處偷懶用萬用招:「等一下」
                            Thread.Sleep(1000); 
                            //抓網頁畫面存檔
                            await page.ScreenshotAsync($"D:\\FreewayTraffic\\Snapshot{region}.png");
                        }
                    }
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.ToString());
                throw;
            }
        }
    }
}

這樣,每次執行可取得北中南三張路況網頁擷圖:

C# 整合 Headless Chrome 的好工具 - Puppeteer Sharp

工具箱再添好用兵器一件。

Introduce of the handy Headless Chrome integration library - Puppeteer Sharp.


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

复杂:信息时代的连接、机会与布局

复杂:信息时代的连接、机会与布局

罗家德 / 中信出版集团股份有限公司 / 2017-8-1 / 49.00 元

信息科技一方面创造了人们互联的需要,另一方面让人们在互联中抱团以寻找归属感,因此创造了大大小小各类群体的认同和圈子力量的兴起,即互联的同时又产生了聚群,甚至聚群间的相斥。要如何分析这张网?如何预测它的未来变化?如何在网中寻找机会,实现突围?本书提出了4个关键概念──关系、圈子、自组织与复杂系统: • 关系 关系是人与人的连接,又可以被分为强关系和弱关系。强关系就是和你拥有亲密关系的人,......一起来看看 《复杂:信息时代的连接、机会与布局》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器
随机密码生成器

多种字符组合密码