html文件转pdf

源地址：https://www.jianshu.com/p/4941c7966cc3

产品中难免有需要在web上生成pdf并导出或下载的需求。当然解决方案可能很多，比如html转换成pdf, 或者做一个freemaker或word的模版，然后转换成pdf.
下面主要说说html转换成pdf的方案，毕竟使用html模版更方便直接。通常有以下两类解决方案：

server端转换成pdf;
web端通过第三方js插件转换；

server端转换html生成pdf

在服务器端转换通常用到的插件是iText. 但是iText对css的支持不好，不过有一个对iText封装后的开源插件flying-saucer就可以解决这个问题。
flying-saucer主要是通过读取html源码来生成pdf。因此，它对html的检查很严格，必须使用闭合标签，即"</meta> </>"这种才是可识别的。
flying-saucer可以通过三种方式来转换html。

获得html静态文件路径；

读取html文件流；
获得html url链接。

下面来看看主要代码：
pom.xml

<dependency><groupId>org.xhtmlrenderer</groupId><artifactId>flying-saucer-pdf-itext5</artifactId><version>9.1.1</version>
</dependency>

GeneratePdf.java

...
ITextRenderer renderer = new ITextRenderer();
//url或者物理路径
renderer.setDocument("http://localhost:8080/report/templete");ITextFontResolver fontResolver = renderer.getFontResolver();//支持中文
if (System.getProperty("os.name").contains("Window")) {fontResolver.addFont("C:/Windows/Fonts/simsun.ttc", BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED);
} else {fontResolver.addFont("/usr/share/fonts/win/simsun.ttc", BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED);
}renderer.layout();
renderer.createPDF(os);
...

demo.html

...
<style type="text/css">
body {font-family: SimSun;//支持中文
}
</style>
...

flying-saucer转换pdf有一个问题，就是如果html不能静态化，那么内容就没办法转换成pdf。比如html用了vue.js来绘制一些图表，这个是没法用flying-saucer来生成pdf的。
有一种解决方案就是给打开的html生成快照，然后将图片转换成pdf。这就是接下来介绍的web端转换html生成pdf。

web端转换html生成pdf

web端html转pdf就简单多了，可以直接通过jspdf来解决，它的主要方式就是html生成cavans然后再生成pdf。
主要代码如下：
demo.html

...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js"></script><script>function export1(){var pdf = new jsPDF('p','pt','a4');pdf.addHTML(document.body,function() {pdf.save('web.pdf');});}</script>
...<div><button onclick="export1()">export</button>
</div>
...

这种方式会存在两个问题，

分辨率问题会导致生成的pdf质量不会很高；
内容自适应，可能会把连续的内容截断。

作者：朝圣的路上
链接：https://www.jianshu.com/p/4941c7966cc3
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。