wkhtmltopdf导出html到pdf

时间 2019-12-01

标签 wkhtmltopdf 导出 html pdf 栏目 HTML 繁體版

原文原文链接

一、使用背景
最近公司须要把html页面的内容生成pdf并下载，试过不少方法都没有满意的效果，后来找到wkhtmltopdf这款软件，终于解决了这个问题。html

wkhtmltopdf是exe文件，须要下载安装，以后所有文件放到mvc项目，用C#的ProcessStartInfo调用执行。mvc

要导出的html页面：ide

二、下载安装
官网：https://wkhtmltopdf.org/。url

主页download里下载对应系统的版本安装并把安装后的文件放到vs里面方便以后调用。spa

三、使用的参数3d

wkhtmltopdf的参数有四种：封面对象、目录对象、文档对象和页面对象。这里须要用到的是文档对象和页面对象。code

还有不少其余参数，具体的参数列表能够看官方文档：https://wkhtmltopdf.org/usage/wkhtmltopdf.txthtm

使用方法：wkhtmltop
df [GLOBAL OPTION]... [OBJECT]... <output file>对象

从左到右依次是：命令开始、使用灰度模式、禁止智能缩放、设置页眉为html文件、生成pdf的页面网址、生成的pdf文件名称。
上面是在命令提示符使用的方式，在mvc里使用：blog

1  ProcessStartInfo startInfo = new ProcessStartInfo(); 2  startInfo.FileName = file; 3  startInfo.Arguments = "wkhtmltopdf --grayscale --disable-smart-shrinking --header-html head.html https://www.baidu.com 123.pdf"; 4  startInfo.CreateNoWindow = true; 5  startInfo.WindowStyle = ProcessWindowStyle.Hidden; 6  var cc = Process.Start(startInfo); 7  cc.WaitForExit(); 8  cc.Close();

View Code

四、添加水印
公司要求生成的pdf须要添加水印，每页pdf显示两个logo水印图片。开始是用给每一个div设置背景图片的方式添加水印，让背景图片以y轴重复。因为每一个div的高度不定，致使一个水印生成在两个pdf页面，影响美观，果断放弃。后来使用页眉设置html的方式来显示水印，这里要注意的是，页眉会占用html的位置，因此我用before和after伪元素来写两个logo水印。

水印效果图：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <style>
 5  * { margin:0;padding:0;}
 6  #divd::before{content:"";width:400px;height:400px;background:url(mark.png);position:absolute;opacity:0.3;left:50%;margin-left:-200px;}
 7  #divd::after{content:"";width:400px;height:400px;background:url(mark.png);position:absolute;opacity:0.3;left:50%;margin-left:-200px;top:400px}
 8     </style>
 9 </head>
10 <body style="border:0; margin: 0;">
11     <div id="divd" style=""></div>
12 </body>
13 </html>

View Code

以后只要用--header-html head.html方式调用这个页面就会每页pdf生成两个水印图片。

五、pdf分页
默认pdf生成是把内容从上往下写入，并很差看，导出的pdf效果：

公司要求每一个div处须要重新的页开始，这里给须要分页的div添加page-break-before:left样式便可，最终pdf效果：

六、其余
a、若是有td或者th须要隐藏border，须要使用这个样式border:0。
b、生成的pdf设置间距时用padding不用margin。