前段时间由于项目上的需求,要在.Net平台下实现把HTML内容生成图片或PDF文件的功能,特意在网上研究了几种方案,这里记录一下以备日后再次使用。当时想着找一种开发部署都比较清爽并且运行稳定的方案,但实际上两者同时满足基本不可能,只能做一个自己觉得合适的取舍,下面从两个维度(清爽指数和功能指数)逐一对比。

1.   WebBrowser

这种方案在开发时不依赖任务外部程序集和nuget包,部署时也不需要安装额外的工具和服务,可以说是非常清爽了。它借助了WinForm下的WebBrowser控件实现HTML内容渲染,并把渲染结果绘制在Bitmap中,进而保存成图片或PDF文件。这种方案简单粗暴,是C#中最基础的实现方式,也是网上搜索结果最多的一种,下面看它的核心代码(从网上拼凑得来):

     class WebBrowserPage2Image
{
Bitmap m_Bitmap; string m_Url; public void Convert(string pageUrl, string fileName)
{
m_Url = pageUrl;
Thread m_thread = new Thread(new ThreadStart(HtmlDrawToBitmap));
m_thread.SetApartmentState(ApartmentState.STA);
m_thread.IsBackground = true;
m_thread.Start();
m_thread.Join();
MemoryStream stream = new MemoryStream();
m_Bitmap.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
byte[] buff = stream.ToArray();
FileStream fs = new FileStream(fileName, FileMode.Create);
stream.WriteTo(fs);
stream.Dispose();
stream.Close();
fs.Close();
} private void HtmlDrawToBitmap()
{
WebBrowser browser = new WebBrowser();
browser.ScrollBarsEnabled = false;
browser.Navigate(m_Url);
browser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(delegate (object sender, WebBrowserDocumentCompletedEventArgs bdce)
{
if (browser.ReadyState == WebBrowserReadyState.Complete)
{
//myWebBrowser.Document.Body.Style = "zoom:180%";
Rectangle r = browser.Document.Body.ScrollRectangle;
browser.Height = r.Height;
browser.Width = r.Width;
m_Bitmap = new Bitmap(browser.Width, browser.Height);
browser.BringToFront();
browser.DrawToBitmap(m_Bitmap, new Rectangle() { Width = browser.Width, Height = browser.Height });
}
});
while (browser.ReadyState != WebBrowserReadyState.Complete)
{
Application.DoEvents();
}
browser.Dispose();
}
}

虽然开发起来非常简洁,但是问题也很明显。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, , -, "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结构或样式发生变化,那这套东西就失效了,好在这个不会轻易变更,也算是一个折中方案。

【工具篇】在.Net中实现HTML生成图片或PDF的几种方式的更多相关文章

  1. Net中实现HTML生成图片或PDF

    Net中实现HTML生成图片或PDF的几种方式 前段时间由于项目上的需求,要在.Net平台下实现把HTML内容生成图片或PDF文件的功能,特意在网上研究了几种方案,这里记录一下以备日后再次使用.当时想 ...

  2. springMVC中获取request和response对象的几种方式(RequestContextHolder)

    springMVC中获取request和response对象的几种方式 1.最简单方式:参数 2.加入监听器,然后在代码里面获取 原文链接:https://blog.csdn.net/weixin_4 ...

  3. Oracle中函数/过程返回结果集的几种方式

    原文 Oracle中函数/过程返回结果集的几种方式 Oracle中函数/过程返回结果集的几种方式:    以函数return为例,存储过程只需改为out参数即可,在oracle 10g测试通过.    ...

  4. ASP.NET MVC中使用Unity进行依赖注入的三种方式

    在ASP.NET MVC中使用Unity进行依赖注入的三种方式 2013-12-15 21:07 by 小白哥哥, 146 阅读, 0 评论, 收藏, 编辑 在ASP.NET MVC4中,为了在解开C ...

  5. Android中EditText显示明文与密文的两种方式

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录输入框显示.隐藏密码的简单布局以及实现方式. 效果图    代码分析 方式一 /**方式一:*/ private void sh ...

  6. 在eclipse中使用Maven建web工程的两种方式

    Eclipse版本:Neon Release (4.6.0) Maven版本:3.3.9 第一种方式: 右键新建maven工程,勾选创建一个简单工程 填入信息,注意打包方式要改为war 点击完成,创建 ...

  7. Java中创建(实例化)对象的五种方式

    Java中创建(实例化)对象的五种方式1.用new语句创建对象,这是最常见的创建对象的方法. 2.通过工厂方法返回对象,如:String str = String.valueOf(23); 3.运用反 ...

  8. Windows10-UWP中设备序列显示不同XAML的三种方式[3]

    阅读目录: 概述 DeviceFamily-Type文件夹 DeviceFamily-Type扩展 InitializeComponent重载 结论 概述 Windows10-UWP(Universa ...

  9. ASP.NET MVC2中Controller向View传递数据的三种方式

    转自:http://www.cnblogs.com/zhuqil/archive/2010/08/03/Passing-Data-from-Controllers-to-View.html 在Asp. ...

随机推荐

  1. ecplise常见的一些问题

    修改注释的字体,默认的字体太小了.

  2. python 内置函数的补充 isinstance,issubclass, hasattr ,getattr, setattr, delattr,str,del 用法,以及元类

    isinstance   是 python中的内置函数 , isinstance()用来判断一个函数是不是一个类型 issubclass  是python 中的内置函数,  用来一个类A是不是另外一个 ...

  3. Java读入优化

    之前被软院校赛卡了一波T,很亏啊.以下抄袭自Codeforces的神仙Petr. 可能得系统研究Java怎么写了?缺点是不能使用hasNext(),可能需要在main()中解决. import jav ...

  4. Forward Rendering 正向渲染

    Forward Rendering 正向渲染        正向渲染一个基于着色器的渲染路径.它支持逐像素计算光照(包括法线贴图和灯光Cookies)和来自一个平行光的实时阴影.在默认设置中,少数最亮 ...

  5. Linux 根据进程ID查看文件路径(转)

    遇到的问题是想要查看进程的启动脚本在哪里,比如自己写的weblogic启动脚本,但忘记放在哪里了,这时候可以用以下方式 1.用ps -ef |grep xxxxx 得到该进程的pid 2.输入ls - ...

  6. 2018ccpc_hn

    A. Easy h-index #include <iostream> #include <algorithm> #include <cstring> #inclu ...

  7. python如何永久添加模块搜索路径

    win10系统 依次点击:控制面板\系统和安全\系统\高级系统设置\环境变量   找不到的话,直接在设置中搜索  环境变量  也一样 此时上面是用户变量 下面是系统变量   在系统变量中找到PYTHO ...

  8. 使用jqzoom插件时

    [javascript] view plaincopy /*使用jqzoom*/ $(function() { $(".jqzoom").jqueryzoom({ xzoom: 3 ...

  9. DHCP snooping(DHCP监听)

    DHCP监听可以防范利用DHCP发起的多种攻击行为,如DHCP中间人攻击,伪造多台设备耗尽地址池 DHCP监听允许可信端口上的所有DHCP消息,但是却过滤非可信端口上的DHCP消息,DHCP监听还会在 ...

  10. 1-zookeeper基本原理和使用

    1 分布式应用 1.1 分布式系统原理 在一个网络中,每台服务器上各跑一个应用,然后彼此连接起来就组成一套系统.比如提供完成的游戏服务,需要有认证应用,道具应用,积分应用,游戏主应用等,应用并非跑在一 ...