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>