跳到主要內容

【工具篇】在.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結構或樣式發生變化，那這套東西就失效了，好在這個不會輕易變更，也算是一個折中方案。


 


 


 

【精選推薦文章】



智慧手機時代的來臨，RWD網頁設計已成為網頁設計推薦首選



想知道網站建置、網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計及後台網頁設計



帶您來看台北網站建置，台北網頁設計，各種案例分享



廣告預算用在刀口上，網站設計公司幫您達到更多曝光效益


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

留言

張貼留言

這個網誌中的熱門文章

Python 併發總結，多線程，多進程，異步IO

1 測量函數運行時間 import time def profile(func): def wrapper(*args, ** kwargs): import time start = time.time() func( *args, ** kwargs) end = time.time() print ' COST: {} ' .format(end - start) return wrapper @profile def fib(n): if n<= 2 : return 1 return fib(n-1) + fib(n-2 ) fib( 35 )   2 啟動多個線程，並等待完成   2.1 使用threading.enumerate() import threading for i in range(2 ): t = threading.Thread(target=fib, args=(35 ,)) t.start() main_thread = threading.currentThread() for t in threading.enumerate(): if t is main_thread: continue t.join()   2.2 先保存啟動的線程 threads = [] for i in range(5 ): t = Thread(target=foo, args= (i,)) threads.append(t) t.start() for t in threads: t.join()   3 使用信號量，限制同時能有幾個線程訪問臨界區 from threading import Semaphore import time sema = Semaphor...
張貼留言
閱讀完整內容

高雄十大包子名店出爐

, 圖文：吳恩文 高雄包子大賽落幕了，我只能就我個人意見， 介紹一下前十名這些包子，但是不能代表其他四位評審的意見，雖然身為評審長，我通常不會第一個表示意見，以免影響其他評審， 我主要工作是負責發問。   這次參賽的素包子很少，而且都不夠細致，又偏油，我不愛， 但是第一名的甜芝麻包－熔岩黑金包，竟然是素食得名－ 漢來蔬食巨蛋店。   這包子賣相太好，竹炭粉的黑色外皮刷上金粉，一上桌，眾人驚呼， 搶拍照，內餡是芝麻餡，混一點花生醬增稠，加入白糖芝麻油， 熔岩爆漿的程度剛剛好，我一直以為芝麻要配豬油才行、 但是選到好的黑芝麻油一樣不減香醇， 當下有二位評審就想宅配回家。   尤其特別的是，黑芝麻餡室溫易化，師傅必須要輪班躲在冷藏室內， 穿著大外套才能包，一天包不了多少，我笑說，漢來美食，集團餐廳那麼多，實力雄厚，根本是「 奧運選手報名參加村裡運動會」嘛，其他都是小包子店啊， 但是沒辦法，顯然大家都覺得它好看又好吃， 目前限定漢來蔬食高雄巨蛋店，二顆88元，可以冷凍宅配， 但是要排一陣子，因為供不應求，聽說，四月份， 台北sogo店開始會賣。   第二名的包子，左營寬來順早餐店，顯然平易近人的多，一顆肉包， 十塊錢，是所有參賽者中最便宜的，當然，個頭也小， 它的包子皮明顯和其他不同，灰灰的老麵，薄但紮實有嚼勁， 肉餡新鮮帶汁，因為打了些水，味道極其簡單，就是蔥薑，塩， 香油，薑味尤其明顯，是老眷村的味道， 而特別的是老闆娘是台灣本省人， 當年完全是依據眷村老兵的口味一步一步調整而來，沒有加什麼糖、 五香粉，胡椒粉，油蔥酥。就是蔥薑豬肉和老麵香，能得名， 應該是它的平實無華，鮮美簡單，打動人心。   這是標準的心靈美食，可以撫慰人心，得名之前，寛來順已經天天排隊，現在，恐怕要排更久了， 建議大家六七點早點上門。   第三名，「專十一」很神奇，我記得比賽最後， 大家連吃了幾家不能引起共鳴的包子，有些累，到了專十一， 就坐著等包子，其他評審一吃，就催我趕快試，我一吃， 也醒了大半。   它的包子皮厚薄適中，但是高筋麵粉高些，老麵加一點點酵母， 我心中，它的皮屬一屬二，至於餡又多又好吃，蛋黃還是切丁拌入， 不是整顆放，吃起來「美味、均衡、飽滿」。一顆二十元。   老闆是陸軍專科十一期畢業取名專十一，...
張貼留言
閱讀完整內容

韋伯連續劇終於更新 期待第一季順利完結

　　地球天文學界的跳票大王詹姆斯·韋伯空間望遠鏡 (James Webb Space Telescope，縮寫為 JWST)自 1996 年以來斷斷續續不按劇本演出的連續劇終於讓焦慮的觀眾們又等到了一次更新：五層遮陽罩測試順利完成。 裝配完成的韋伯望遠鏡與好夥伴遮陽罩同框啦。Credit: NASA 　　嚴格的測試是任何空間任務順利成功的重中之重。遮陽罩，這個韋伯望遠鏡異常重要的親密夥伴，要是無法正常運轉的話，韋伯的這一季天文界連續劇說不準就要一直拖更了。 　　詹姆斯·韋伯空間望遠鏡是歷史上造出的最先進的空間望遠鏡。它不僅是一架紅外望遠鏡，還具有特別高的靈敏度。但想要達到辣么高的靈敏度來研究系外行星和遙遠的宇宙童年，韋伯童鞋必須非常"冷靜"，體溫升高的話，靈敏度會大大折損。這個時候，遮陽罩就要大顯身手啦。 　　遮陽罩在韋伯的設計中至關重要。韋伯望遠鏡會被發射到拉格朗日 L2 點，運行軌道很高，遠離太陽、地球與月球。太陽是韋伯的主要熱量干擾的來源，其次是地球與月球。遮陽罩會有效阻斷來自這三大熱源的能量並保護韋伯維持在工作溫度正常運轉。這個工作溫度指的是零下 220 攝氏度(-370 華氏度；50 開爾文)。 上圖中我們可以看出，韋伯望遠鏡的配置大致可分為兩部分：紅色較熱的一面溫度為 85 攝氏度，藍色較冷的一面溫度達到零下 233 攝氏度。紅色的這部分中，儀器包括太陽能板、通信設備、計算機、以及轉向裝置。藍色部分的主要裝置包括鏡面、探測器、濾光片等。Credit: STSci. 　　遮陽罩的那一部分和望遠鏡的鏡面這部分可以產生非常極端的溫差。遮陽的這面溫度可以達到 110 攝氏度，足以煮熟雞蛋，而背陰處的部分溫度極低，足以凍結氧氣。 　　工程師們剛剛完成了五層遮陽罩的測試，按照韋伯在 L2 時的運行狀態安裝了遮陽罩。L2 距離地球約 160 萬公里。NASA 表示這些測試使用了航天器的自帶系統來展開遮陽罩，測試目前都已成功完成。韋伯望遠鏡遮陽罩負責人 James Cooper 介紹說這是遮陽罩"第一次在望遠鏡系統的电子設備的控制下展開。儘管這個任務非常艱巨，難度高，但測試順利完成，遮陽罩展開時的狀態非常驚艷"。 　　遮陽罩由五層 Kapton 製成。Kapton 是一種聚酰亞胺薄膜材料， 耐高溫絕...
張貼留言
閱讀完整內容