xhtmlrenderer 将html转换成pdf，完美css，带图片，手动分页，解决内容断开的问题_gqltt的博客

相关文章推荐

想出国的大象 · 深圳市地方标准批准发布公告（总第114号）- ...· 1 月前 ·

私奔的自行车 · 明基 MH560 ...· 2 月前 ·

悲伤的冰棍 · 香蜜吻戏合集||何忍红烛光冷透_哔哩哔哩_b ...· 7 月前 ·

爱喝酒的核桃 · Making Gynogenetic ...· 1 年前 ·

讲道义的硬盘 · 18日产途乐Y62全尺寸越野SUV性价比最高 ...· 1 年前 ·

来源： xhtmlrenderer 将html转换成pdf，完美css，带图片，手动分页，解决内容断开的问题 - 煮过的花朵 - 博客园

之前用itext7将html导出为pdf，比较方便，代码较少，而且支持base64的图片。但是itext7是收费的，所以换成了xhtmlrenderer。

xhtmlrenderer自动引入依赖包itext2.0.8，而且不能再引入其他版本的itext，因为itext2.0.8是已经被废弃的，里面的很多方法在新版本已经没有了。

itext导出pdf最重要的4个难点：

1.css样式

2.中文不显示

3.图片（itext7支持比较好，不过要收费）

4.分页时内容断开的问题（itext7不会出现这种问题，不过要收费）

一、首先引入包

只需要这个就够了，它会自动引入itext2.0.8

<dependency>
            <groupId>org.xhtmlrenderer</groupId>
            <artifactId>core-renderer</artifactId>
            <version>R8</version>
</dependency>

二、页面css样式的采集

看过很多篇itext的文章，都没有达到想象中要求。大多是说将css路径改为绝对路径，或者将css写在页面中，这都不现实。真正的项目中，你的项目经理是不会让你这么做的。

所以我找到一个能将页面所有css采集起来的js方法。传入你的标签的id，返回一个包含该id的区域的所有css样式，加上html，head和body标签，组成一个html的字符串。将字符串传给后台去生成pdf。值得注意的是我加了这个字体body{font-family: SimSun;}，这个字符是中文字体，后端必须与前端一致。且看后面。

function getElementChildrenAndStyles(selector) {
         var html = $(selector).prop("outerHTML");
         selector = selector.split(",").map(function(subselector){
             return subselector + "," + subselector + " *";
         }).join(",");
         elts = $(selector);
         var rulesUsed = [];
         //文档的所有样式表
         sheets = document.styleSheets;
         for(var c = 0; c < sheets.length; c++) {
             // rules 和 cssRules 的计数方法也是不一样的！rules 是第几个选择器；cssRules 是第几条规则,
             // 分别用于IE7和chrome
             var rules = sheets[c].rules || sheets[c].cssRules;
             for(var r = 0; r < rules.length; r++) {
                 //selectorText: $节点
                 var selectorText = rules[r].selectorText;
                 var matchedElts = $(selectorText);
                 //找到dom节点里所有节点，并将其push到数组里
                 for (var i = 0; i < elts.length; i++) {
                     if (matchedElts.index(elts[i]) != -1) {
                         rulesUsed.push(rules[r]); break;
         //重组style
         var style = rulesUsed.map(function(cssRule){
             if (cssRule.style) {
                 var cssText = cssRule.selectorText+'{'+cssRule.style.cssText.toLowerCase()+'}';
             } else {
                 var cssText = cssRule.selectorText+'{'+cssRule.cssText+'}';
              return cssText;
         }).join("\n");
         return "<html><head><meta charset='UTF-8'/> <style>\n" 　　　　　　　　　　+ style　　　　　　　　　  +"\n td{background:white!important;}"　　　　　　　　　　+"\n body{font-family: SimSun;} \n</style>\n\n</head><body>"　　　　　　　　　  + html+"</body></html>";
 今天解决了分页的时候会断开内容的问题，解决方案就是手动分页，用js计算高度然后超过页面高度的就换页，这样就不会出现自动换页的时候内容断开了。 
1.我将需要显示的元素都添加class= ‘pdf-page-range’     
2. class='pageNext'             .pageNext{page-break-after: always;} 这个css表示下一个元素将会换页，转pdf的时候itext会自动识别。 
3.在前面的基础上插入以下代码即可，需要图片转换之后执行， 
注意：这个修改了网页内容，如果想保留原网页内容，自行想办法 -。-！ 
//后端低版本的itext对分页的处理非常不友好，所以前端页面强制分页。//我将需要显示的元素都添加class= ‘pdf-page-range’//class='pageNext'   .pageNext{page-break-after: always;}  这个css表示下一个元素将会换页。
    function pdfPageRange(){
        var heigth= 0;   
        $(".pdf-page-range").each(function(){
            var $this = $(this);
            var $table = $this.find('table');
            var $next = $this.next();
            var $prevPage = $this.prev('.pageNext');
            index = $(".pageNext").length;
            var tagName = $this[0].tagName;
            var element_tag;
            if($table&&$table.length>0){
                element_tag = $table[0];
            if(tagName=='table'||tagName=='TABLE'){
                element_tag = $this[0];
            if(element_tag){
                heigth = tablePage($(element_tag),heigth)
                return true;
            //不是table的处理
            heigth +=  $this[0].offsetHeight;
            if(heigth>1000){
                $this.before("<div class='pageNext' ></div> ");
                heigth = $this[0].offsetHeight;
    //table单独算高度
    function tablePage($table,heigth){
        var $trList = $table.find('tr');
        var $thead = $table.find('tr.thead');
        $trList.each(function(){
            heigth += $(this)[0].offsetHeight;
            if(heigth>1000){
                $(this).before($thead.prop("outerHTML"));
                $thead_add = $(this).prev().prev();
                $thead_add.addClass('pageNext');
                heigth = $(this)[0].offsetHeight+$thead_add[0].offsetHeight;
        return heigth;
三、图片的支持 
　　项目中有很多Echarts做的图表，这个生成的图表都是canvas标签，而itext是不支持canvas标签的。所以要把图表全部换成base64的img标签。这里引入一个js。 
html2canvas.js，它能将制定区域截图。请看以下。 
1.html2canvas（）方法返回的是Promise类型，为什么要将所有 html2canvas（）方法的返回值集中起来然后使用Promise.all(canvasArray).then（）方法。因为html2canvas（）是异步的，你的下面的js已经处理完了，它可能还没截图完成。Promise.all(canvasArray).then（）方法，会在所有截图已经完成之后执行。所以我把ajax请求放在里面。（请看代码） 
2. img标签闭合的问题，img标签是自闭合标签。正常情况下，浏览器不会去识别你的img的闭合标签，即使你的img标签有</img>或<img  src=""  />,浏览器最后显示还是<img>,  所以我用一个字符串代替“/”， 后台再用“/”代替这个字符串，你也可以前端就替换。（请看代码）  
3.必须给img加上宽度和高度，不然被后台转换之后尺寸会变得很小。 
$("#itextpdf").click(function(){
          var canvasArray = [];
           $(".charts").each(function(){
             var $this=$(this);
             var canvasIndex = html2canvas(
                     $this,
                     {   scale: 5
                         ,background: '#FFFFFF'
                         ,onrendered:function(canvas){
                             var imgBase64 = canvas.toDataURL('image/jpeg', 1.0);
                              $this.html("");
                              //  标签被jquery获取后，自定义属性closingtags会变成closingtags=""，你可以加个css将图片隐藏起来，然后在html字符串里面再加一个显示的css。
                             $this.append ("<img  class=“hidden” alt='' src='"+ imgBase64+"' closingtags  > ") 
             canvasArray.push(canvasIndex);
           Promise.all(canvasArray).then(function () {
             var str = getElementChildrenAndStyles('#basket');
                $.post("/ecloud/sa/saerrorquestions/exportpdf.do",{"str":str  },function(r){
$("#itextpdf").click(function(){
          var canvasArray = [];
           $(".charts").each(function(){
             var $this=$(this);
             var canvasIndex = html2canvas(
                     $this,
                     {   scale: 5
                         ,background: '#FFFFFF'
                         ,onrendered:function(canvas){
                             var imgBase64 = canvas.toDataURL('image/jpeg', 1.0);
                              $this.html("");
                              //  标签被jquery获取后，自定义属性closingtags会变成closingtags=""，你可以加个css将图片隐藏起来，然后在html字符串里面再加一个显示的css。
                             $this.append ("<img  class=“hidden” alt='' src='"+ imgBase64+"' closingtags  > ") 
             canvasArray.push(canvasIndex);
           Promise.all(canvasArray).then(function () {
             var str = getElementChildrenAndStyles('#basket');
                $.post("/ecloud/sa/saerrorquestions/exportpdf.do",{"str":str  },function(r){
 四、后台代码 
　　 项目中引入中文字体，html字符串中也必须引入。我的字体css是     body{font-family: SimSun;} 
package cn.myc.ykt3.util;
import java.io.FileOutputStream;
import java.io.OutputStream;
import org.xhtmlrenderer.pdf.ITextFontResolver;
import org.xhtmlrenderer.pdf.ITextRenderer;
import com.lowagie.text.pdf.BaseFont;
public class ItextHtmlTopdf  {
     * @param htmlStr html字符串
     * @return
     * @throws Exception
    public String exportpdf(String htmlStr ) throws  Exception  {
        if (StringUtils.isBlank(htmlStr)) {
            return null;
        htmlStr = htmlStr.trim().replaceAll("<","<").replaceAll( ">",">").replaceAll("<br/>","\n|\r\n|\r" )
                .replaceAll(" "," ");
        htmlStr= htmlStr.replace("closingtags=\"\"", "/");
        String classpath = this.getClass().getResource("/").getPath().replaceFirst("/", "");
        String webappRoot = classpath.replaceAll("/target/classes", "/src/main/webapp");
        //-----版本2.0.8
        ITextRenderer renderer = new ITextRenderer();
        OutputStream os = new FileOutputStream("C:/Users/Administrator/Desktop/createSamplePDF3.pdf");
        // 如果携带图片则加上以下两行代码,将图片标签转换为Itext自己的图片对象，Base64ImgReplacedElementFactory为图片处理类
        renderer.getSharedContext().setReplacedElementFactory(new Base64ImgReplacedElementFactory());
        renderer.getSharedContext().getTextRenderer().setSmoothingThreshold(1);
        renderer.setDocumentFromString(htmlStr);
        ITextFontResolver fontResolver = renderer.getFontResolver();
        // 解决中文支持问题，参数为字体的路径，html页面也必须引入字体
        fontResolver.addFont(webappRoot+"static/sanalysis/simsun.ttf", BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED);
        renderer.layout();
        renderer.createPDF(os);
        os.close();
        return null;
Base64ImgReplacedElementFactory图片处理类 
package cn.myc.ykt3.util;
import java.io.IOException ;
import org.w3c.dom.Element ;
import org.xhtmlrenderer.extend.FSImage ;
import org.xhtmlrenderer.extend.ReplacedElement ;
import org.xhtmlrenderer.extend.ReplacedElementFactory ;
import org.xhtmlrenderer.extend.UserAgentCallback ;
import org.xhtmlrenderer.layout.LayoutContext ;
import org.xhtmlrenderer.pdf.ITextFSImage ;
import org.xhtmlrenderer.pdf.ITextImageElement ;
import org.xhtmlrenderer.render.BlockBox ;
import org.xhtmlrenderer.simple.extend.FormSubmissionListener ;
import com.lowagie.text.BadElementException ;
import com.lowagie.text.Image ;
import com.lowagie.text.pdf.codec.Base64 ;
public class Base64ImgReplacedElementFactory implements ReplacedElementFactory {
     * 实现createReplacedElement 替换html中的Img标签
     * @param c 上下文
     * @param box 盒子
     * @param uac 回调
     * @param cssWidth css宽
     * @param cssHeight css高
     * @return ReplacedElement
    public ReplacedElement createReplacedElement(LayoutContext c, BlockBox box, UserAgentCallback uac,
            int cssWidth, int cssHeight) {
        Element e = box.getElement();
        if (e == null) {
            return null;
        String nodeName = e.getNodeName();
        // 找到img标签
        if (nodeName.equals("img")) {
            String attribute = e.getAttribute("src");
            FSImage fsImage;
            try {
                // 生成itext图像
                fsImage = buildImage(attribute, uac);
            } catch (BadElementException e1) {
                fsImage = null;
            } catch (IOException e1) {
                fsImage = null;
            if (fsImage != null) {
                // 对图像进行缩放
                if (cssWidth != -1 || cssHeight != -1) {
                    fsImage.scale(cssWidth, cssHeight);
                return new ITextImageElement(fsImage);
        return null;
     * 将base64编码解码并生成itext图像
     * @param srcAttr 属性
     * @param uac 回调
     * @return FSImage
     * @throws IOException io异常
     * @throws BadElementException BadElementException
    protected FSImage buildImage(String srcAttr, UserAgentCallback uac) throws IOException,
            BadElementException {
        FSImage fsImage;
        if (srcAttr.startsWith("data:image/")) {
            String b64encoded = srcAttr.substring(srcAttr.indexOf("base64,") + "base64,".length(),
                    srcAttr.length());
            // 解码
            byte[] decodedBytes = Base64.decode(b64encoded);
            fsImage = new ITextFSImage(Image.getInstance(decodedBytes));
        } else {
            fsImage = uac.getImageResource(srcAttr).getImage();
        return fsImage;
     * 实现reset
    public void reset() {
    @Override
    public void remove(Element arg0) {}
    @Override
    public void setFormSubmissionListener(FormSubmissionListener arg0) {}
导出的pdf效果，自动分页，并且分页不会强制裁剪图片区域。 
                    来源：xhtmlrenderer 将html转换成pdf，完美css，带图片，手动分页，解决内容断开的问题 - 煮过的花朵 - 博客园之前用itext7将html导出为pdf，比较方便，代码较少，而且支持base64的图片。但是itext7是收费的，所以换成了xhtmlrenderer。xhtmlrenderer自动引入依赖包itext2.0.8，而且不能再引入其他版本的itext，因为itext2.0.8是已经被废弃的，里面的很多方法在新版本已经没有了。itext导出pdf最重要的4个难点：
				springboot使用xhtmlrenderer将html转图片 支持img标签、css需要实现的需求引入依赖html模板放置位置和获取方法使用freemarker填充模板将html字符串转为图片到这里就结束了
需要实现的需求
目前需要实现一个需求，通过填充现有模板来生成图片。之前模板使用图片，但修改起来不够灵活，现在改用html。结合freemarker填充数据，然后使用xhtmlrenderer转成图片。但遇到img标签不起作用的问题，查了很多博客，受这篇启发xhtmlrenderer 将html转换
				来源：xhtmlrenderer + iText-HTML转PDF_hunan961的博客-CSDN博客_xhtmlrenderer
xhtmlrendere+itext2.0.8 将html转成pdf，带样式、图片(也支持二维码、条形码)等
生成html（css样式直接放在style中）
	html转换pdf方法
	数据返回给前端
html模板：
private static final String DEFAULT_HTML = "<!DOCTYPE html PUB
xhtmlrenderer+freemarker
xhtmlrenderer是基于itext的一套渲染器,核心包主要是文本/图片这些简单的文本渲染工具,衍生的就包括了pdf了,关于渲染成pdf的方法可以看我另一篇文章
引入freemarker与xhtmlrenderer
<dependency>
	<groupId>org.freemarker</groupId>
				最近项目上有要求,需要生成一个可供客户下载的pdf或者图片的许可协议,这个pdf/图片里面的内容需要是用户相关的内容,也就是内容是可变的,不过其他的样式是统一的,我也因此找了相关的功能包,发现可以使用
xhtmlrenderer+freemarker
完成这个需求,此次仅制作了pdf相关教程供大家参考,至于图片相关等下期
因pdf的内容是可变的,所以单纯的html是无法满足要求的,搜索了一下发现可以使用freemarker,
freemarker是一种模板引擎,可以基于模板和要改变的数据, 用来生
				1、core-renderer.jar该jar包修改过中文不换行问题
    public static String getConversionHtmlCode(String linkcss,String htmlCode,String title){
        String css = "";
        css +="<style>";
        css +="table{";
        css +=" border-collapse: collapse;";
        css +=" font-size: 15px;";
        css +="    width: 98%;";
        css +="}";
        css +="";
        css +="td{";
        css +="    border: 1px solid #ddd;";
        css +=" text-align: left;";
        css +=" white-space: nowrap";
        css +="}";
        css +="th{";
        css +="    border: 1px solid #ddd;";
        css +=" text-align: left;";
        css +="}";
        css +="</style>";
        String html = "<html><head>"+css+"</head><body  margin:0;margin-top: 15px;margin-bottom: 15px; text-align: center; font-family:SimSun;\" >"+ title+""+ htmlCode + "</body></html>";
        System.out.println("html:"+html);
        return html;
				实现把html转换成图片，解决了转换中的图片、表格、中文问题，原则是先转换成pdf，然后转换成图片，需要下载icepdf开源包，附件中包括程序和转换pdf所需jar包
html  图片 pdf  icepdf xhtmlrenderer
字体文件包下载地址simsun.ttc字体文件  :链接:百度网盘 请输入提取码  密码:yhdo 如果是发送邮件附件则需要以下代码bytefile则是转为pdf返回的byte数组  
 &lt;dependency&gt;
    &lt;groupId&gt;org.xhtmlrenderer&lt;/groupId&gt;
    &lt;artifactId&gt;core-renderer&lt;/artifactId&gt;
    &lt;version&gt;R8&lt;/version&gt;
  &lt;/dependency&g
您可以使用以下Java代码来生成PDF目录并可跳转：// 导入FlyingSaucer类库
import org.xhtmlrenderer.pdf.ITextRenderer;// 创建一个新的PDF文档
ITextRenderer renderer = new ITextRenderer();// 循环生成目录
for(int i = 0; i < numOfPages; i++) {
  // 生成目录项
  renderer.addNamedDestination("page" + i, i, 0, 0);
  // 生成对应的页面内容
  renderer.getRootNode().addElement(createPageContent(i));
}// 将PDF文档写入流
OutputStream os = new FileOutputStream("document.pdf");
renderer.layout();
renderer.createPDF(os);
os.close();