内容简介:在我的工具箱,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+ 才能使用)
先說 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 資料夾一起複製過去)
接著透過 Puppeteer.LaunchAsync() 傳入參數,即可建立一個 Headless Chrome 進行操作。
官方網站已提供許多 實用範例 ,像是擷取網頁畫面、轉存 PDF、在網頁加入 HTML、執行 JavaScript 函式比對結果,足夠大家發揮巧思,組裝出各樣花式應用,這裡不再贅述。
Puppeteer Sharp 是 Puppeteer note.js API 的移植版,若要進階活用需深入了解 Puppeteer 指令,以下是一些資源:
最後,來個簡單練習,我用高速公路 1968 即時路況網站當題材,寫一支排程抓取查詢北中南區的即時路況地圖畫面:
查過原始碼,左上區塊的「全部/北/中/南」按鈕,北中南分別是呼叫 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; } } } }
這樣,每次執行可取得北中南三張路況網頁擷圖:
工具箱再添好用兵器一件。
Introduce of the handy Headless Chrome integration library - Puppeteer Sharp.
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Next框架与主流工具的整合(二)—— 完善与优化
- 整理js开发中的实用小工具(一):做一个整合存储的小工具
- CarthagePods -- 一个整合 CocoaPods 和 Carthage 一起使用的工具
- CarthagePods -- 一个整合 CocoaPods 和 Carthage 一起使用的工具
- VulnWhisperer:数据可被ElasticSearch索引的漏洞数据及报告整合工具
- Mapbox Beta为开发者提供了将AR整合到汽车和移动设备导航应用中的工具
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Ext JS学习指南
(美)布莱兹、(美)拉姆齐、(美)弗雷德里克 / 孔纯、肖景海、张祖良 / 人民邮电出版社 / 2009-10 / 39.00元
《Ext JS学习指南》系统化地介绍了Ext JS的基础知识,从框架的下载安装到各种常用小部件的实例介绍,从如何自定义小部件到Ext JS代码复用和扩展机制,《Ext JS学习指南》覆盖了Ext JS知识的所有主要方面。作为Web 2.0时代企业应用的一把开发利器,Ext JS为企业应用开发的表现层实现提供了优秀的解决方案。 如果你掌握了HTML,并且了解一般的CSS和JavaScript的......一起来看看 《Ext JS学习指南》 这本书的介绍吧!