1, Use background
      Recently, the company needs to html Page content generation pdf And download , I tried many methods, but they didn't have satisfactory results , Later we found out wkhtmltopdf This software , It finally solved the problem .

     wkhtmltopdf yes exe file , Download and install required , After that, all the files will be put into mvc project , use C# Of ProcessStartInfo Call execution .

      To export html page :



2, Download and install
      Official website :https://wkhtmltopdf.org/ <https://wkhtmltopdf.org/>.

      homepage download Download the version of the corresponding system and install it in vs After calling it convenient .


3, Parameters used

      wkhtmltopdf There are four parameters of : Cover object , Catalog object , Document and page objects . Document object and page object are needed here .


      There are many other parameters , See official documents for specific parameter list :https://wkhtmltopdf.org/usage/wkhtmltopdf.txt

      usage method :wkhtmltop
      df [GLOBAL OPTION]... [OBJECT]... <output file>


      From left to right : Command start , Use grayscale mode , Disable smart scaling , Set header to html file , generate pdf Web address of , Generated pdf File name .
      This is how you use it at the command prompt , stay mvc Used in :
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

4, Add watermark
  Generated as required by the company pdf Need to add watermark , each page pdf Show two logo Watermark image . For each div Add watermark by setting background picture , Let the background picture y Axis repeat . Because of each div The height of , Causes a watermark to be generated in two pdf page , Affect Aesthetics , Give up decisively . Use header settings later html To display watermarks , What we should pay attention to here is , Header will occupy html Location of , So I use before and after Pseudo elements to write two logo watermark .

Watermark rendering :

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{
opacity:0.3;left:50%;margin-left:-200px;top:400px} 8 </style> 9 </head> 10 <
bodystyle="border:0; margin: 0;"> 11 <div id="divd" style=""></div> 12 </body>
13 </html> View Code

After that, just use --header-html head.html This page will be called every page pdf Generate two watermark images .


5,pdf paging
default pdf Generation is to write content from top to bottom , Not pretty , Exported pdf effect :


The company requires each div Need to start with a new page , Here is the page to be paged div add to page-break-before:left Style is enough , final pdf effect :


6, other
     a, If any td perhaps th Need to be hidden border, This style is required border:0.
     b, Generated pdf To set the spacing padding no need margin.