【工具篇】在.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结构或样式发生变化,那这套东西就失效了,好在这个不会轻易变更,也算是一个折中方案。
上一篇: 你咋那么损呢
下一篇: 本地数据存储解决方案以及cookie的坑