基于flying-saucer和freemark实现HTML导出pdf

偏执的太偏执、 2022-06-13 03:36 1526阅读 0赞

一、背景

最近需要生成pdf报告，为了页面效果和方便后期维护，需要制作HTML模板，并从HTML导出pdf。基于这个需求，研究了一下前端和后台导出pdf的类库，先简单介绍下。

PD4ML是一个比较强大的java类库，是商业版的，因为我的项目是maven工程，不方便使用，没有详细研究。

iText是比较著名的java类库，我这里用5.5.11版本简单试了试。iText有很丰富的API，我们可以将HTML代码转化成iText可识别的Document对象，从而导出PDF文档。但是使用iText直接导出HTML页面的效果很糟糕，它无法识别很多HTML的tag和attribute，也不支持CSS。虽然Itext提供了很多底层的API，但是很不灵活，布局渲染都要hard code进java类里面，当需求发生改变时，哪怕只需要更改一个属性名，都要重新修改那段代码，维护起来相当麻烦。

html2pdf是开源的js库，使用起来也很简单，原理是将HTML页面转成图片，并添加到pdf中。Htm2pdf能将页面样式原封不动的保留，还封装了图片质量的参数，缺点是图片质量设置的比较高时，客户端压力较大，导出的pdf还会出现文字截断的现象，也就是pdf分页的地方会有一半文字在上一页，一半在下一页。

Wkhtmltopdf是第三方工具，导出效果也不错，同样会出现文字截断的现象。

flying sauser 是开源的java类库，它是基于iText并做了封装，能解析HTML和CSS，能输出image，PDF格式也可以方便的设置，很完美，完全满足我的需求，flying sauser也是我最终采用的库。

二、实现方法

使用flying sauser生成PDF的整个流程是这样的：

(1) 编写Freemarker模板，制作HTML报告，CSS样式可以使用，但注意不要引用需要js的样式文件。

(2) 在业务逻辑层中获取数据，使用Freemarker引擎生成最终的内容

(3) 调用flying sauser，生成PDF

jar包选择

<groupId>org.freemarker</groupId>

<artifactId>freemarker</artifactId>

</dependency>

<groupId>org.xhtmlrenderer</groupId>

<artifactId>flying-saucer-pdf-itext5</artifactId>

</dependency>

flying sauser生成pdf代码

package com.iflytek.itesttech.utils;

import java.io.File;

import java.io.IOException;

import java.io.OutputStream;

import org.springframework.stereotype.Component;

import org.xhtmlrenderer.pdf.ITextFontResolver;

import org.xhtmlrenderer.pdf.ITextRenderer;

import com.itextpdf.text.DocumentException;

import com.itextpdf.text.pdf.BaseFont;

@Component

public class ExportPdf {

public void exportPdfFromUrl   (String url,OutputStream os)           throws IOException{

ITextRenderer renderer   = new ITextRenderer();

//指定模板地址

renderer.setDocument(url);

// 解决中文支持

try {

ITextFontResolver fontResolver =      renderer.getFontResolver();

String FontPath =      new File(this.getClass().getClassLoader().getResource      ("fonts/msyh.ttf").getPath()).getCanonicalPath();

fontResolver.addFont(      FontPath,BaseFont.IDENTITY_H,      BaseFont.NOT_EMBEDDED);

}      catch (IOException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}      catch (DocumentException e)      {

// TODO Auto-generated catch block

e.printStackTrace();

}

renderer.layout();

try {

renderer.createPDF(os);

}      catch (DocumentException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

os.flush();

os.close();

}

Controller浏览器输出文件

@RequestMapping(value = "/pdfGenerate", method = RequestMethod.GET)

@ResponseBody

public void pdfGenerate (HttpServletRequest request, HttpServletResponse response,String pdfName) {

String basePath = request.getScheme()  + "://" + request.getServerName() + ":"  + request.getServerPort()+request.getContextPath() + "/";

String url=basePath+"/report";

try {

pdfName = URLEncoder.encode(pdfName, "UTF-8");//不能超过17个字

pdfName = pdfName.replace("+", "%20");//处理空格

} catch (java.io.UnsupportedEncodingException e) {

e.printStackTrace();

}

response.setHeader  ("Content-disposition", "attachment;filename="+pdfName);

response.setContentType("application/pdf");

OutputStream os = null;

try {

os=response.getOutputStream();

exportPdf.exportPdfFromUrl(url, os);

} catch (IOException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}finally{

try {

if(os!=null){

os.flush();

os.close();

}

} catch (IOException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

HTML模板

<!DOCTYPE html>

<html>

<head>

.table >tbody > tr > td,.table > thead > tr > th {

padding: 8px;

text-align: left;

}

@page{size:297mm 420mm;}

</style>

</head>

<div style="font-size:24px; line-height: 1.1; font-weight: 500; margin-top: 5px; margin-bottom: 5px;"> ${taskBuildInfo.scanName?default("")}</div>

<small>报告生成时间： ${currTime?string("yyyy-MM-dd HH:mm:ss")}</small>

</div>

</div>

<small style="float:right;line-height:4em"> 检测时间： ${taskBuildInfo.startTime?string("yyyy-MM-dd HH:mm:ss")}</small>

</div>

<thead>

</tr>

</thead>

<#if holeList?size==0>

</tr>

<#else>

<#list list as item>

<td style="width:45%;color:#333;"> ${item.name?default("")}</td>

<#if hole.level??>

<#if hole.level gte 3>

<#elseif hole.level == 2>

<#elseif hole.level lte 1>

<#else>

<span style="color: #98984c;"> ${item.level?default("")}</span>

</#if>

</td>

<td style="width:45%;"> ${item.desc?default("")}</td>

</tr>

</#list>

</#if>

</tbody>

</table>

</div>

</body>

</html>

三、使用中的一些问题

1、flyingsauser中文字体问题

将系统字体文件msyh.ttf放入工程，并显示添加。注意字体文件与HTML模板中字体设置要一致，font-family不要使用中文，大小写正确。

ITextFontResolver fontResolver = renderer.getFontResolver();

fontResolver.addFont(FontPath,BaseFont.IDENTITY\_H,BaseFont.NOT\_EMBEDDED);

2、图片路径问题

flying sauser版本9.1.5能自动识别图片路径，jar包引入正确就能正常显示图片，不需要做多余的处理。

3、中文换行问题

flying sauser 9.1.5支持中文换行，不能正常显示的话注意看看是不是引入了多余的jar包，之前因为多引入了flyingsauser的core包导致中文不能换行，删除引用就能正常显示了。

4、HTML模板规则

（1）所有标签都要关闭

（2）大写标签不识别，都要用小写，比如<DIV><TD>统统不识别

（3）所有属性必须加引号，比如<tdcolspan=3 >要写成<tdcolspan="3" >

四、进阶

flying-saucer做一下特殊的页面设置，只用修改HTML页面，加入一些标签即可，十分简单方便，下面举几个例子。

1、pdf纸张设置，分页

只需要在head中加入page样式即可，设置边距和纸张大写

@page {

size:297mm 420mm;

margin: 20mm 5mm 40mm 5mm;

}

2、pdf水印设置

只需要在body中加入背景图片即可

3、pdf标签设置

在页面合适位置增加锚点，并在head中加入<bookmarks>标签

<head>

<bookmark name="summary" href="#summary" />

<bookmark name="table" href="#table" />

</bookmarks>

</head>

4、pdf页眉页脚设置

在head中设置样式，在body中加入页面页脚内容。

<style>

#header {position: running(header);}

#footer {position: running(footer);}

@page{

@top-center{

content : element(header);

}

@bottom-center{

content : element(footer)

}

#pages:before{

content : counter(page);

font-size : 10px;

}

#pages:after{

content : counter(pages);

font-size : 10px;

}

</style>

<span>科大讯飞测试技术部</span>

</div>

</div>

2017.07.08测试技术嘉年华火热报名中

国际著名安全机构OWASP、前惠普高级性能工程师大牛就要来讯飞啦

还不快来报名！

报名地址：[https://www.sojump.hk/jq/14382135.aspx][https_www.sojump.hk_jq_14382135.aspx]

嘉年华官网：[http://itest.iflytek.com/][http_itest.iflytek.com]

爱测未来公众号：itest\_forever

![Center][]

CSDN:[http://blog.csdn.net/itest\_2016][http_blog.csdn.net_itest_2016]

QQ群：274166295（爱测未来2群）、610934609（爱测未来3群）

会场地址：合肥市望江西路666号科大讯飞语音产业基地A1\#201会场

时间：2017.07.08

[https_www.sojump.hk_jq_14382135.aspx]: https://www.sojump.hk/jq/14382135.aspx
[http_itest.iflytek.com]: http://itest.iflytek.com/
[Center]: /images/20220613/f59bf27cbe534c17aae700ff01b87af8.png
[http_blog.csdn.net_itest_2016]: http://blog.csdn.net/itest_2016