上一篇我們談到 PuppeteerSharp - 快照網頁並產出 PDF + 設定 PDF 格式 ，繼續上篇
原始的畫面長這樣子
這時候，客戶希望我能夠，將每一個產品都進行快照成圖片
後來我發現其實是可以透過 PuppeteerSharp 做到的，感覺到強大阿
1. 一樣先安裝 PuppeteerSharp 套件
2.觀察一下網頁 ，我測試的網址是 https://shopee.tw/search?keyword=%E7%93%A6%E8%92%99%E5%8F%A4
觀察一下，他顯示的每一個 商品的 item class 是 shopee-search-item-result__item
3. 程式碼的部分
<![CDATA[
var url = "https://shopee.tw/search?keyword=瓦蒙古";
using var browserFetcher = new BrowserFetcher();
await browserFetcher.DownloadAsync(BrowserFetcher.DefaultChromiumRevision);
var browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
Headless = true,
IgnoreHTTPSErrors = true,
DefaultViewport = ViewPortOptions.Default,
});
var page = await browser.NewPageAsync();
await page.SetViewportAsync(new ViewPortOptions
{
Width = 1920,
Height = 1280
});
await page.GoToAsync(url);
Thread.Sleep(3 * 1000);
var eles = await page.QuerySelectorAllAsync("div.shopee-search-item-result__item");
var tmp = 1;
foreach (var ele in eles)
{
await ele.ScreenshotAsync(downloadPath + Path.DirectorySeparatorChar + "test" + tmp + ".png");
tmp++;
}
await browser.CloseAsync();
]]>
result:
這邊補述一個奇怪的現象，其實我測試這一篇花了一段時間，後來找到原因但是卻又無法重現，當你出現
Parse JSON Error 得時候，你就升級或是降級你的 Newtonsoft.Json ，因為我在這邊卡了很久，網路上也沒查到查線索
我還下載了官方的 source code 官方是用 13.0.1 我就把我本機版本 從 13.0.2 降到 13.0.1 竟然成功，我以為是 bug
正要回報，我把我 JSON.NET 又裝回 13.0.2 竟然又無法重現錯誤，所以這邊大概說一下，希望有關鍵字打到給碰到該靈異現象的人
