【工具篇】在.Net中實現HTML生成圖片或PDF的幾種方式

来源:https://www.cnblogs.com/hohoa/archive/2019/06/25/11087198.html
-Advertisement-
Play Games

前段時間由於項目上的需求，要在.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     }
View Code

雖然開發起來非常簡潔，但是問題也很明顯。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結構或樣式發生變化，那這套東西就失效了，好在這個不會輕易變更，也算是一個折中方案。

 

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • java--註解
    java 註解 通常用於項目中的配置，項目中一些不常變的量，比如說功能變數名稱等，還可以用於裝飾者模式 ...
  • python演算法與數據結構-順序表(37)
    1、順序表介紹 順序表是最簡單的一種線性結構，邏輯上相鄰的數據在電腦內的存儲位置也是相鄰的，可以快速定位第幾個元素，中間不允許有空，所以插入、刪除時需要移動大量元素。順序表可以分配一段連續的存儲空間Maxsize，用elem記錄基地址，用length記錄實際的元素個數，即順序表的長度， 上圖1表示 ...
  • 靜態方法staticmethod和類方法classmethod
    靜態方法staticmethod和類方法classmethod 一、類方法classmethod 把一個方法變成一個類中的方法，這個方法可以直接利用類來調用，不需要依托任何的對象，即不需要實例化也可以做一些改變 當這個方法的操作只涉及靜態屬性的時候，就應該使用classmethod來裝飾這個方法 運 ...
  • eclipse編寫js代碼沒有提示
    安裝插件 點擊Help，選擇Eclipse Marketplace... 搜索js，安裝AngularJS Eclipse 重啟eclipse，右鍵項目，選擇Configure(配置),選擇Convert to AspectJ Project即可 若再次變更，在項目屬性中的JavaScript Te ...
  • Actor模型（分散式編程）
    Actor的目的是為瞭解決分散式編程中的一系列問題。所有消息都是非同步交付的，因此將消息發送方與接收方分開，正是由於這種分離，導致actor系統具有內在的併發性：可以不受限制地並行執行任何擁有輸入消息的 actor。用Actor寫的程式可以不用管是怎麼實現的，只用傳遞數據就可以，操作簡單。當然Acto ...
  • [WPF自定義控制項庫]使用TextBlockHighlightSource強化高亮的功能，以及使用TypeConverter簡化調用
    1. 強化高亮的功能 "上一篇文章" 介紹了使用附加屬性實現TextBlock的高亮功能，但也留下了問題：不能定義高亮(或者低亮)的顏色。為瞭解決這個問題，我創建了 這個類，比單純的字元串存儲更多的信息，這個類的定義如下： 相應地，附加屬性的類型也改變為這個類，並且屬性值改變事件改成這樣： 的關鍵代 ...
  • C#多線程的同步與通信
    C#中使用lock和Monitor控制多線程對資源的使用，最常見的生產者和消費者問題就是多線程同步和通信的經典例子。瞭解C#多線程的同步與通信。 一、關於lock和Monitor lock可以把一段代碼定義為互斥段（critical section），互斥段在一個時刻內只允許一個線程進入執行，而其它 ...
  • 通過SharpZipLib實現文件夾壓縮以及解壓
    代碼說明 1. 基於SharpZipLib實現Zip壓縮解壓，擴展實現文件夾級別壓縮解壓； 2. 項目源碼： "MasterChief.DotNet.Infrastructure.Zip" 3. Install Package MasterChief.DotNet.Infrastructure.Zi ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類