html页面导出为pdf（jsPDF、iText、wkhtmltopdf）

浅浅的花香味﹌ 2022-05-28 01:19 393阅读 0赞

html页面导出pdf，本来是一件很简单的事情，在浏览器直接打印(Mac快捷键为⌘+p；Windows快捷键为ctrl+p)，就可以把页面另存为pdf文件，但对于要经常把页面导出为pdf的用户来说并不友好，一个合格程序员的标准就是：做出来的软件猪都要会用，否则你就是猪。

调研了几种html导出pdf的实现方式，这里把要点记录下来分享下。

<table> 
 <thead> 
  <tr> 
   <th align="center">调研对象</th> 
   <th align="center">优点</th> 
   <th align="center">缺点</th> 
   <th align="center">分页</th> 
   <th align="center">图片</th> 
   <th align="center">表格</th> 
   <th align="center">链接</th> 
   <th align="center">中文</th> 
   <th align="center">特殊字符、样式</th> 
   <th align="center">导出样例</th> 
   <th align="center">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">jsPDF</td> 
   <td align="center">1、整个过程在客户端执行(不需要服务器参与)，调用简单</td> 
   <td align="center">1、生成的pdf为图片形式，且内容失真</td> 
   <td align="center">支持</td> 
   <td align="center">支持</td> 
   <td align="center">支持</td> 
   <td align="center">不支持</td> 
   <td align="center">支持</td> 
   <td align="center">支持</td> 
   <td align="center"></td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center">iText</td> 
   <td align="center">1、功能基本可以实现，比较灵活2、生成pdf质量较高</td> 
   <td align="center">1、对html标签严；格，少一个结束标签就会报错；2、后端实现复杂，服务器需要安装字体；3、图片渲染比较复杂(暂时还没解决)</td> 
   <td align="center">支持</td> 
   <td align="center">支持</td> 
   <td align="center">支持</td> 
   <td align="center">支持</td> 
   <td align="center">支持</td> 
   <td align="center">支持</td> 
   <td align="center"></td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center">wkhtmltopdf</td> 
   <td align="center">1、调用方式简单(只需执行一行脚本)；2、生成pdf质量较高</td> 
   <td align="center">1、服务器需要安装wkhtmltopdf环境；2、根据网址生成pdf，对于有权限控制的页面需要在拦截器进行处理</td> 
   <td align="center">支持</td> 
   <td align="center">支持</td> 
   <td align="center">支持</td> 
   <td align="center">支持</td> 
   <td align="center">支持</td> 
   <td align="center">支持</td> 
   <td align="center"></td> 
   <td align="center"></td> 
  </tr> 
 </tbody> 
</table>

上面三种是着重调研的三种方式，下面进行简单介绍。

一、html2canvas+jsPDF

--------------------

这种方式的原理是利用html2canvas遍历页面中的dom节点，渲染成canvas image，再用jsPDF把canvas image转化为pdf，最后转化的pdf的内容都是图片形式，类似于把整个网页截图、切割，再一页一页拼接成一个完整的pdf。

代码样例  
html：

<button id="exportToPdf">导出为PDF</button>
    <div id="export_content">
        这里是要导出为pdf中的内容
    </div>

javascript(需要依赖jspdf和html2canvas相关js)：

这种方法的优点是所有的过程都由js在客户端完成，不需要依赖服务器。  
目前发现的两个比较明显的缺点：  
1、生成的pdf质量不高，失真比较严重（不过在github上这个方法可以适当提高下生成pdf的清晰度[https://github.com/niklasvh/html2canvas/pull/1087][https_github.com_niklasvh_html2canvas_pull_1087]）；  
2、在分页处如果有图片的话，不会自动识别隔页处理（甚至一行文字也能给你上下一分为二），而是无情地把图片一分为二，满满的违和感~如下图：  
![这里写图片描述][70]

github上有一篇文章说明比较详细，还有具体的demo：[https://github.com/linwalker/render-html-to-pdf][https_github.com_linwalker_render-html-to-pdf]

二、iText

--------------------

iText是一个第三方报表java插件，可以在后端利用java随意生成、转化pdf文件，提供了很多api，比较灵活。

代码样例  
pom依赖：

<dependency>
        <groupId>org.eclipse.birt.runtime.3_7_1</groupId>
        <artifactId>com.lowagie.text</artifactId>
        <version>2.1.7</version>
    </dependency>
    <dependency>
        <groupId>org.xhtmlrenderer</groupId>
        <artifactId>flying-saucer-pdf</artifactId>
        <version>9.0.8</version>
    </dependency>
    <dependency>
        <groupId>com.itextpdf</groupId>
        <artifactId>itextpdf</artifactId>
        <version>5.4.2</version>
    </dependency>

java实现：

ITextRenderer renderer = new ITextRenderer();
    ITextFontResolver fontResolver = renderer.getFontResolver();
    fontResolver.addFont("/Users/hehe/share/Fonts/simsun.ttc", BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED);
    OutputStream os = new FileOutputStream("/Users/hehe/Desktop/iTextPDF.pdf");
    String htmlstr = HttpHandler.sendGet("http://localhost:10086/test/iTextPDF.html");//HttpHandler.sendGet只是单纯获得指定网页的html字符串内容
    renderer.setDocumentFromString(htmlstr);
    renderer.layout();
    renderer.createPDF(os);

以上只是简单利用html字符串来生成pdf，需要注意的是：  
1、如果页面中有中文，服务器端需要下载字体库simsun.ttc，在后台进行引用，同时在页面的样式中加入对应字体的定义，如：`body{font-family: SimSun;}`，否则中文无法渲染（中文处渲染出来的效果是空白）；  
2、页面中如果有图片，如果图片引用是绝对路径或者base64则不用考虑，如果是相对路径，需要在后台用`renderer.getSharedContext().setBaseURL("图片绝对路径目录");`来指定图片路径，否则图片无法渲染。  
3、要转化的页面必须是标准的XHTML页面，有一处不符合规范就会报错，小编再试的时候就经常报诸如`org.xml.sax.SAXParseException;lineNumber: 24; columnNumber: 6;元素类型 "span" 必须由匹配的结束标记 "</span> 终止"`之类的错误，所以如果要用iText来大量爬取网络中的页面的话，还是放弃吧，毕竟网上很多页面都是不标准的~

三、wkhtmltopdf

--------------------

wkhtmltopdf是一个可以把html转为pdf的插件，有windows、linux等平台的版本，最大的特点就是使用简单，语言无关性。  
1、下载：官网下载 [https://wkhtmltopdf.org/downloads.html][https_wkhtmltopdf.org_downloads.html]  
2、执行：该插件是“绿色版”，无需编译安装，下载解压后，在bin目录下有wkhtmltoimage和wkhtmltopdf两个文件，生成pdf可以直接运行wkhtmltopdf（也可以把bin目录配置到环境变量），执行`wkhtmltopdf -V`查看是否可以执行。  
执行的时候可能会报错`wkhtmltopdf: error while loading shared libraries: libXrender.so.1` 或者 `./wkhtmltopdf: error while loading shared libraries: libfontconfig.so.1: cannot open shared object file: No such file or directory` 具体解决方法可参考[https://www.svennd.be/wkhtmltopdf-error-while-loading-shared-libraries-libxrender-so-1/][https_www.svennd.be_wkhtmltopdf-error-while-loading-shared-libraries-libxrender-so-1]

如果执行完打印出wkhtmltopdf的版本号，则说明OK了，下面来一个打印html页面的例子试试看，就把本页面转化成pdf吧：

wkhtmltopdf --disable-smart-shrinking https://blog.csdn.net/huyuyang6688/article/details/79710704 myBlog.pdf

执行完之后，就会在当前目录生成一个pdf（当然生成pdf的目录可以指定），`--disable-smart-shrinking` 这个参数是关闭缩放，如果不加的话，生成的pdf内容会特别“瘦”，不造为啥这个命令在mac环境下不是很有效，不敢在linux环境生成的PDF是正常的。具体更详细的用法可以参考如下文章：  
1、[HTML 转 PDF 之 wkhtmltopdf 工具简介][HTML _ PDF _ wkhtmltopdf]  
2、[HTML 转 PDF 之 wkhtmltopdf 工具精讲][HTML _ PDF _ wkhtmltopdf 1]  
3、[wkhtmltopdf参数详解][wkhtmltopdf]  
4、解决wkhtmltopdf支持中文和缩放问题：[wkhtmltopdf折腾记][wkhtmltopdf 1]

与之类似的还有一个叫Phantomjs的插件，效果差不多，还没深入研究。

--------------------

> **注意：**以上是小编在调研过程中的一些记录，分享给大家作参考，希望对您有所帮助，如果有其他疑问，欢迎交流沟通。【 转载请注明出处——胡玉洋[《html页面导出为pdf（jsPDF、iText、wkhtmltopdf）》][html_pdf_jsPDF_iText_wkhtmltopdf]】

[https_github.com_niklasvh_html2canvas_pull_1087]: https://github.com/niklasvh/html2canvas/pull/1087
[70]: /images/20220528/0c165e5995fb42a18c09bab133b85069.png
[https_github.com_linwalker_render-html-to-pdf]: https://github.com/linwalker/render-html-to-pdf
[https_wkhtmltopdf.org_downloads.html]: https://wkhtmltopdf.org/downloads.html
[https_www.svennd.be_wkhtmltopdf-error-while-loading-shared-libraries-libxrender-so-1]: https://www.svennd.be/wkhtmltopdf-error-while-loading-shared-libraries-libxrender-so-1/
[HTML _ PDF _ wkhtmltopdf]: https://www.jianshu.com/p/559c594678b6
[HTML _ PDF _ wkhtmltopdf 1]: https://www.jianshu.com/p/4d65857ffe5e
[wkhtmltopdf]: https://blog.csdn.net/churujianghu/article/details/75076255
[wkhtmltopdf 1]: http://daveztong.github.io/2016/12/06/wkhtmltopdf%E6%8A%98%E8%85%BE%E8%AE%B0/
[html_pdf_jsPDF_iText_wkhtmltopdf]: https://blog.csdn.net/huyuyang6688/article/details/79710704