【工具篇】在.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");

    更多高级功能和配置可以参考官网例子：

　清爽指数：★★★★　　　　功能指数：★★★★

    

写在最后

    以上几种方式，都是我在本次实践中总结出来的，可能不是很全面，欢迎大家不吝补充。

    遗憾的是，最终项目没有用上面的任何一种方式，而是抓取到html内容后用正则解析，然后用bitmap一点一点重新画图生成图片文件保存。因为我要截取的页面内容很少，就是一个简单的电子处方笺，需求上也没有要求必须完全和原网页100%一致，绘图也算是一个不错的方案，但是缺点是一旦html结构或样式发生变化，那这套东西就失效了，好在这个不会轻易变更，也算是一个折中方案。