Net中實(shí)現(xiàn)HTML生成圖片或PDF的幾種方式

前段時(shí)間由于項(xiàng)目上的需求，要在.Net平臺(tái)下實(shí)現(xiàn)把HTML內(nèi)容生成圖片或PDF文件的功能，特意在網(wǎng)上研究了幾種方案，這里記錄一下以備日后再次使用。當(dāng)時(shí)想著找一種開(kāi)發(fā)部署都比較清爽并且運(yùn)行穩(wěn)定的方案，但實(shí)際上兩者同時(shí)滿足基本不可能，只能做一個(gè)自己覺(jué)得合適的取舍，下面從兩個(gè)維度（清爽指數(shù)和功能指數(shù)）逐一對(duì)比。

1.WebBrowser

這種方案在開(kāi)發(fā)時(shí)不依賴任務(wù)外部程序集和nuget包，部署時(shí)也不需要安裝額外的工具和服務(wù)，可以說(shuō)是非常清爽了。它借助了WinForm下的WebBrowser控件實(shí)現(xiàn)HTML內(nèi)容渲染，并把渲染結(jié)果繪制在Bitmap中，進(jìn)而保存成圖片或PDF文件。這種方案簡(jiǎn)單粗暴，是C#中最基礎(chǔ)的實(shí)現(xiàn)方式，也是網(wǎng)上搜索結(jié)果最多的一種，下面看它的核心代碼（從網(wǎng)上拼湊得來(lái)）：

View Code

雖然開(kāi)發(fā)起來(lái)非常簡(jiǎn)潔，但是問(wèn)題也很明顯。WebBrowser是Winform下的一個(gè)組件，在非Winform項(xiàng)目中運(yùn)行會(huì)出現(xiàn)不可知的異常，即使在Winform項(xiàng)目中，數(shù)據(jù)量比較大的時(shí)候依然會(huì)出現(xiàn)卡死的情況。我做過(guò)500次循環(huán)的測(cè)試，在執(zhí)行到100多次的時(shí)候程序出現(xiàn)假死不動(dòng)也無(wú)異常拋出。除此之外，生成的圖片失真也比較嚴(yán)重，特殊字體和部分CSS樣式無(wú)法渲染。總的來(lái)說(shuō)，基本無(wú)法達(dá)到生成環(huán)境需求。

清爽指數(shù)：★★★★★　　　　功能指數(shù)：★

2.Wkhtmltox

這也是網(wǎng)上廣泛流傳的一個(gè)方案，wkhtmltox是一套開(kāi)源的命令行工具，提供了圖片和PDF的轉(zhuǎn)換能力，它采用C++編寫(xiě)，使用Webkit作為渲染引擎，開(kāi)源地址是https://github.com/wkhtmltopdf/wkhtmltopdf。使用方法就是在命令行工具中執(zhí)行命令，例如：

wkhtmltopdf --grayscale  https://www.baidu.com  baidu.pdf

如果要在.Net項(xiàng)目中使用的話，核心問(wèn)題就是用程序喚起命令行，同時(shí)指定參數(shù)執(zhí)行即可，類似于下面的代碼：

       System.Diagnostics.ProcessStartInfo Info = new System.Diagnostics.ProcessStartInfo();
       Info.FileName = @"D:devwkhtmltoxinwkhtmltopdf.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();

更多強(qiáng)大的功能例如加水印、分頁(yè)、改樣式等可以參考這篇文章：https://www.cnblogs.com/82xb/p/7837597.html

詳細(xì)的參數(shù)說(shuō)明可以查看文檔：https://wkhtmltopdf.org/usage/wkhtmltopdf.txt

GitHub上有很多針對(duì)各個(gè)開(kāi)發(fā)語(yǔ)言的封裝，使用起來(lái)比較方便，唯一不爽的是部署項(xiàng)目前要先安裝好這個(gè)工具。

清爽指數(shù)：★★★★　　　　功能指數(shù)：★★★★

3.PuppeteerSharp

這個(gè)就更厲害了，說(shuō)到這個(gè)就不得不先介紹下Puppeteer，因?yàn)镻uppeteerSharp正是從Puppeteer衍生而來(lái)。

Puppeteer是由谷歌開(kāi)源的一個(gè)Node項(xiàng)目，它提供了和Chrome DevTools的通信能力，基本上我們能在Chrome實(shí)現(xiàn)的操作通過(guò)它的API都可以實(shí)現(xiàn)，強(qiáng)大到讓你不敢相信。主要的應(yīng)用有：

生成頁(yè)面快照（圖片、PDF）
爬蟲(chóng)，網(wǎng)站內(nèi)容抓取
自動(dòng)化測(cè)試（模擬鍵盤(pán)鼠標(biāo)輸入，表單提交，UI測(cè)試等）
網(wǎng)站性能分析（追蹤，時(shí)間線捕獲等）

開(kāi)源地址是https://github.com/GoogleChrome/puppeteer

在Node項(xiàng)目中使用Puppeteer非常簡(jiǎn)單，先安裝npm包：

npm i puppeteer

安裝過(guò)程可能會(huì)有點(diǎn)慢，因?yàn)樵诎惭b的時(shí)候會(huì)下載一個(gè)最近版本的Chromium（Mac下大概170M，Linux下大概282M，Windows下大概280M）。當(dāng)然，如果你本地已經(jīng)有一個(gè)Chromium，可以設(shè)置npm的全局配置PUPPETEER_SKIP_CHROMIUM_DOWNLOAD跳過(guò)下載，然后在程序中手動(dòng)指定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默認(rèn)使用無(wú)界面模式（headless：true），如果想看到完整的瀏覽器界面，可以通過(guò)下面的設(shè)置開(kāi)啟：

  const browser = await puppeteer.launch({headless: false});

Puppeteer提供了豐富的選擇器接口，可以輕松實(shí)現(xiàn)模擬輸入和鼠標(biāo)點(diǎn)擊，例如：

  await page.type('#index-kw', 'cnblogs');
  await page.click('#index-bn');

還支持指定使用設(shè)備：

  const devices = require('puppeteer/DeviceDescriptors');
  await page.emulate(devices['iPhone 8']);

詳細(xì)的API文檔可以參考：https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

Puppeteer確實(shí)非常強(qiáng)大，但由于它是一個(gè)Node包無(wú)法直接在C#項(xiàng)目中使用，那怎么辦呢？好在有國(guó)外的大神把Puppeteer移植到了.Net平臺(tái)，也就是PuppeteerSharp。

注意：PuppeteerSharp是基于NetStandard 2.0開(kāi)發(fā)的，所以項(xiàng)目的平臺(tái)最低版本要是.NET Framework 4.6.1和.NET Core 2.0。

首先通過(guò)nuget安裝：

PM > Install-Package PuppeteerSharp

導(dǎo)入命名空間：

  using PuppeteerSharp;

下面是我在ASP.NET Core 2.1下封裝的測(cè)試方法：

        [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);

程序會(huì)判斷本地環(huán)境有沒(méi)有可用的Chromium，如果沒(méi)有的話會(huì)自動(dòng)下載一個(gè)默認(rèn)版本的Chromium，這個(gè)過(guò)程可能會(huì)有點(diǎn)長(zhǎng)，下載成功后會(huì)在項(xiàng)目根目錄多一個(gè)這樣的文件夾：

和前面說(shuō)的一樣，如果本地已經(jīng)下載過(guò)Chromium，可以通過(guò)LaunchOptions的ExecutablePath字段指定一個(gè)目錄。目前PuppeteerSharp在網(wǎng)上的資料還不是很多，但是得益于它與Puppeteer高度完整和相似的API，Puppeteer的文檔對(duì)它基本都能適用。

總體來(lái)說(shuō)，這個(gè)工具功能強(qiáng)大并且比較穩(wěn)定（我在Windows和Linux下都測(cè)試通過(guò)），是一個(gè)不錯(cuò)的選擇，但是由于它必須依賴于Chromium來(lái)運(yùn)行，打包部署并不是很方便，我建議把它作為一個(gè)獨(dú)立的web服務(wù)。

清爽指數(shù)：★★★　　　　功能指數(shù)：★★★★★

4.IronPdf

除了一些開(kāi)源的項(xiàng)目和工具能提供HTML轉(zhuǎn)圖片或PDF的功能，很多商業(yè)軟件公司也提供了這樣的產(chǎn)品，IronPdf算是里面比較有代表性的一個(gè)。和其他收費(fèi)軟件不同的是，IronPdf有一個(gè)對(duì)開(kāi)發(fā)者免費(fèi)試用的license：

IronPdf的主要特性包括：

任何類型的HTML文件、代碼片段、URL生成PDF
PDF編輯
圖片與PDF互轉(zhuǎn)
支持HTML5和CSS3，支持響應(yīng)式布局，支持JS腳本，豐富的配置選項(xiàng)
支持C#、VB、Webform、ASP.NET MVC、.NET CORE

我們可以在官網(wǎng)下載DLL文件直接引用到項(xiàng)目，也可以通過(guò)nuget來(lái)安裝：

PM > Install-Package IronPdf

導(dǎo)入命名空間：

  using IronPdf;

一個(gè)最簡(jiǎn)單的例子：

// 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:projectassets").Where(f => f.EndsWith(".jpg") || f.EndsWith(".jpeg"));

// Convert the images to a PDF and save it.
ImageToPdfConverter.ImageToPdf(ImageFiles).SaveAs(@"C:projectcomposite.pdf");

更多高級(jí)功能和配置可以參考官網(wǎng)例子：https://ironpdf.com/examples/image-to-pdf/

　清爽指數(shù)：★★★★　　　　功能指數(shù)：★★★★

寫(xiě)在最后

以上幾種方式，都是我在本次實(shí)踐中總結(jié)出來(lái)的，可能不是很全面，歡迎大家不吝補(bǔ)充。

遺憾的是，最終項(xiàng)目沒(méi)有用上面的任何一種方式，而是抓取到HTML內(nèi)容后用正則解析，然后用Bitmap一點(diǎn)一點(diǎn)重新畫(huà)圖生成圖片文件保存。因?yàn)槲乙厝〉捻?yè)面內(nèi)容很少，就是一個(gè)簡(jiǎn)單的電子處方箋，需求上也沒(méi)有要求必須完全和原網(wǎng)頁(yè)100%一致，繪圖也算是一個(gè)不錯(cuò)的方案，但是缺點(diǎn)是一旦HTML結(jié)構(gòu)或樣式發(fā)生變化，那這套東西就失效了，好在這個(gè)不會(huì)輕易變更，也算是一個(gè)折中方案。

文章作者：hoho首發(fā)論壇：博客園

總結(jié)

以上是生活随笔為你收集整理的Net中实现HTML生成图片或PDF的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。