【工具篇】在.Net中實現HTML生成圖片或PDF的幾種方式
前段時間由於專案上的需求，要在.Net平臺下實現把HTML內容生成圖片或PDF檔案的功能，特意在網上研究了幾種方案，這裡記錄一下以備日後再次使用。當時想著找一種開發部署都比較清爽並且執行穩定的方案，但實際上兩者同時滿足基本不可能，只能做一個自己覺得合適的取捨，下面從兩個維度（清爽指數和功能指數）逐一對比。
1. WebBrowser
這種方案在開發時不依賴任務外部程式集和nuget包，部署時也不需要安裝額外的工具和服務，可以說是非常清爽了。它藉助了WinForm下的WebBrowser控制元件實現HTML內容渲染，並把渲染結果繪製在Bitmap中，進而儲存成圖片或PDF檔案。這種方案簡單粗暴，是C#中最基礎的實現方式，也是網上搜索結果最多的一種，下面看它的核心程式碼（從網上拼湊得來）：
1 class WebBrowserPage2Image
2 {
3 Bitmap m_Bitmap;
4
5 string m_Url;
6
7 public void Convert(string pageUrl, string fileName)
8 {
9 m_Url = pageUrl;
10 Thread m_thread = new Thread(new ThreadStart(HtmlDrawToBitmap));
11 m_thread.SetApartmentState(ApartmentState.STA);
12 m_thread.IsBackground = true;
13 m_thread.Start();
14 m_thread.Join();
15 MemoryStream stream = new MemoryStream();
16 m_Bitmap.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
17 byte[] buff = stream.ToArray();
18 FileStream fs = new FileStream(fileName, FileMode.Create);
19 stream.WriteTo(fs);
20 stream.Dispose();
21 stream.Close();
22 fs.Close();
23 }
24
25 private void HtmlDrawToBitmap()
26 {
27 WebBrowser browser = new WebBrowser();
28 browser.ScrollBarsEnabled = false;
29 browser.Navigate(m_Url);
30 browser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(delegate (object sender, WebBrowserDocumentCompletedEventArgs bdce)
31 {
32 if (browser.ReadyState == WebBrowserReadyState.Complete)
33 {
34 //myWebBrowser.Document.Body.Style = "zoom:180%";
35 Rectangle r = browser.Document.Body.ScrollRectangle;
36 browser.Height = r.Height;
37 browser.Width = r.Width;
38 m_Bitmap = new Bitmap(browser.Width, browser.Height);
39 browser.BringToFront();
40 browser.DrawToBitmap(m_Bitmap, new Rectangle() { Width = browser.Width, Height = browser.Height });
41 }
42 });
43 while (browser.ReadyState != WebBrowserReadyState.Complete)
44 {
45 Application.DoEvents();
46 }
47 browser.Dispose();
48 }
49 }雖然開發起來非常簡潔，但是問題也很明顯。WebBrowser是Winform下的一個元件，在非Winform專案中執行會出現不可知的異常，即使在Winform專案中，資料量比較大的時候依然會出現卡死的情況。我做過500次迴圈的測試，在執行到100多次的時候程式出現假死不動也無異常丟擲。除此之外，生成的圖片失真也比較嚴重，特殊字型和部分CSS樣式無法渲染。總的來說，基本無法達到生成環境需求。
清爽指數：★★★★★ 功能指數：★
2. Wkhtmltox
這也是網上廣泛流傳的一個方案，wkhtmltox是一套開源的命令列工具，提供了圖片和PDF的轉換能力，它採用C++編寫，使用Webkit作為渲染引擎，開源地址是https://github.com/wkhtmltopdf/wkhtmltopdf。使用方法就是在命令列工具中執行命令，例如：
wkhtmltopdf --grayscale https://www.baidu.com baidu.pdf
如果要在.Net專案中使用的話，核心問題就是用程式喚起命令列，同時指定引數執行即可，類似於下面的程式碼：
System.Diagnostics.ProcessStartInfo Info = new System.Diagnostics.ProcessStartInfo();
Info.FileName = @"D:\dev\wkhtmltox\bin\wkhtmltopdf.exe";
Info.WindowStyle = System.Diagnostics.ProcessWindowStyle.Hidden;
Info.CreateNoWindow = true;
Info.Arguments = @"-q --orientation Landscape https://www.baidu.com D:\\baidu.pdf";
System.Diagnostics.Process proc = System.Diagnostics.Process.Start(Info);
proc.WaitForExit();
proc.Close();
更多強大的功能例如加水印、分頁、改樣式等可以參考這篇文章：https://www.cnblogs.com/82xb/p/7837597.html
詳細的引數說明可以檢視文件：https://wkhtmltopdf.org/usage/wkhtmltopdf.txt
GitHub上有很多針對各個開發語言的封裝，使用起來比較方便，唯一不爽的是部署專案前要先安裝好這個工具。
清爽指數：★★★★ 功能指數：★★★★
3. PuppeteerSharp
這個就更厲害了，說到這個就不得不先介紹下Puppeteer，因為PuppeteerSharp正是從Puppeteer衍生而來。
Puppeteer是由谷歌開源的一個Node專案，它提供了和Chrome DevTools的通訊能力，基本上我們能在Chrome實現的操作通過它的API都可以實現，強大到讓你不敢相信。主要的應用有：
- 生成頁面快照（圖片、PDF）
- 爬蟲，網站內容抓取
- 自動化測試（模擬鍵盤滑鼠輸入，表單提交，UI測試等）
- 網站效能分析（追蹤，時間線捕獲等）
開源地址是https://github.com/GoogleChrome/puppeteer
在Node專案中使用Puppeteer非常簡單，先安裝npm包：
npm i puppeteer
安裝過程可能會有點慢，因為在安裝的時候會下載一個最近版本的Chromium（Mac下大概170M，Linux下大概282M，Windows下大概280M）。當然，如果你本地已經有一個Chromium，可以設定npm的全域性配置PUPPETEER_SKIP_CHROMIUM_DOWNLOAD 跳過下載，然後在程式中手動指定Chromium的位置。
生成圖片和PDF檔案例子：
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.baidu.com');
await page.screenshot({path: 'baidu.png'});
await page.pdf({path: 'baidu.pdf', format: 'A4'});
await browser.close();
})();
Puppeteer預設使用無介面模式（headless：true），如果想看到完整的瀏覽器介面，可以通過下面的設定開啟：
const browser = await puppeteer.launch({headless: false});
Puppeteer提供了豐富的選擇器介面，可以輕鬆實現模擬輸入和滑鼠點選，例如：
await page.type('#index-kw', 'cnblogs');
await page.click('#index-bn');
還支援指定使用裝置：
const devices = require('puppeteer/DeviceDescriptors');
await page.emulate(devices['iPhone 8']);
詳細的API文件可以參考：https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md
Puppeteer確實非常強大，但由於它是一個Node包無法直接在C#專案中使用，那怎麼辦呢？好在有國外的大神把Puppeteer移植到了.Net平臺，也就是PuppeteerSharp。
注意：PuppeteerSharp是基於NetStandard 2.0開發的，所以專案的平臺最低版本要是.NET Framework 4.6.1和.NET Core 2.0。
首先通過nuget安裝：
PM > Install-Package PuppeteerSharp
匯入名稱空間：
using PuppeteerSharp;
下面是我在ASP.NET Core 2.1下封裝的測試方法：
[HttpPost, Route("page2img")]
public async Task<string> PageToImage(string url, int? width, int? height)
{
await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);
var browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
Headless = true,
//ExecutablePath="",
Args = new string[] { "--no-sandbox" }
});
var page = await browser.NewPageAsync();
bool fullPage = true;
if (width.HasValue && height.HasValue)
{
await page.SetViewportAsync(new ViewPortOptions
{
Width = width.Value,
Height = height.Value
});
fullPage = false;
}
await page.GoToAsync(System.Web.HttpUtility.UrlDecode(url));
string fileName = $"/Files/{Guid.NewGuid().ToString()}.png";
await page.ScreenshotAsync($"{AppDomain.CurrentDomain.BaseDirectory}{fileName}", new ScreenshotOptions { FullPage = fullPage });
return $"{Request.Host.ToString()}{fileName}";
}
上面方法的第一行：
await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);
程式會判斷本地環境有沒有可用的Chromium，如果沒有的話會自動下載一個預設版本的Chromium，這個過程可能會有點長，下載成功後會在專案根目錄多一個這樣的資料夾：
和前面說的一樣，如果本地已經下載過Chromium，可以通過LaunchOptions的ExecutablePath欄位指定一個目錄。目前PuppeteerSharp在網上的資料還不是很多，但是得益於它與Puppeteer高度完整和相似的API，Puppeteer的文件對它基本都能適用。
總體來說，這個工具功能強大並且比較穩定（我在Windows和Linux下都測試通過），是一個不錯的選擇，但是由於它必須依賴於Chromium來執行，打包部署並不是很方便，我建議把它作為一個獨立的web服務。
清爽指數：★★★ 功能指數：★★★★★
4. IronPdf
除了一些開源的專案和工具能提供HTML轉圖片或PDF的功能，很多商業軟體公司也提供了這樣的產品，IronPdf算是裡面比較有代表性的一個。和其他收費軟體不同的是，IronPdf有一個對開發者免費試用的license：
IronPdf的主要特性包括：
- 任何型別的HTML檔案、程式碼片段、URL生成PDF
- PDF編輯
- 圖片與PDF互轉
- 支援HTML5和CSS3，支援響應式佈局，支援JS指令碼，豐富的配置選項
- 支援C#、VB、Webform、ASP.NET MVC、.NET CORE
我們可以在官網下載DLL檔案直接引用到專案，也可以通過nuget來安裝：
PM > Install-Package IronPdf
匯入名稱空間：
using IronPdf;
一個最簡單的例子：
// Create a PDF from any existing web page
var Renderer = new IronPdf.HtmlToPdf();
Renderer.PrintOptions.EnableJavaScript = true;
Renderer.PrintOptions.PaperOrientation = IronPdf.PdfPrintOptions.PdfPaperOrientation.Landscape;
var PDF = Renderer.RenderUrlAsPdf("https://www.baidu.com");
PDF.SaveAs("baidu.pdf");
// This neat trick opens our PDF file so we can see the result
System.Diagnostics.Process.Start("baidu.pdf");
新增水印：
pdf.WatermarkAllPages("<h2 style='color:red'>SAMPLE</h2>", PdfDocument.WaterMarkLocation.MiddleCenter, 50, -45, "https://www.baidu.com");
用圖片生成PDF文件：
// Select one or more images. This example selects all JPEG images in a specific folder.
var ImageFiles = Directory.EnumerateFiles(@"C:\project\assets").Where(f => f.EndsWith(".jpg") || f.EndsWith(".jpeg"));
// Convert the images to a PDF and save it.
ImageToPdfConverter.ImageToPdf(ImageFiles).SaveAs(@"C:\project\composite.pdf");
更多高階功能和配置可以參考官網例子：https://ironpdf.com/examples/image-to-pdf/
清爽指數：★★★★ 功能指數：★★★★
寫在最後
以上幾種方式，都是我在本次實踐中總結出來的，可能不是很全面，歡迎大家不吝補充。
遺憾的是，最終專案沒有用上面的任何一種方式，而是抓取到HTML內容後用正則解析，然後用Bitmap一點一點重新畫圖生成圖片檔案儲存。因為我要擷取的頁面內容很少，就是一個簡單的電子處方箋，需求上也沒有要求必須完全和原網頁100%一致，繪圖也算是一個不錯的方案，但是缺點是一旦HTML結構或樣式發生變化，那這套東西就失效了，好在這個不會輕易變更，也算是一個折中方案。
&n