freemarker转PDF3

最新推荐文章于 2024-07-13 15:00:24 发布

转载最新推荐文章于 2024-07-13 15:00:24 发布 · 498 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://mp.youkuaiyun.com/mp_blog/creation/editor

java 专栏收录该内容

42 篇文章

订阅专栏

本文展示了如何使用Freemarker和Spring Boot实现分页功能，同时介绍了如何将HTML内容转换为PDF，包括CSS样式处理。通过JavaToPdfHtmlFreeMarker类，实现了动态内容与CSS的结合，创建美观的PDF文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：freemarker-page-demo

预览

page.ftl

<#--
    参数解释：
    page：当前页码，从1开始
    pagesize:分页大小
    totalpages：总页数。也可以放到模板里计算。这里在MyPager类里已计算过了。
    totalrecords：总记录数
    url：链接地址，自动拼接page参数。为了简单，没有判断当前页面是否有get参数了，直接做了&连接，默认认为原来就有参数。当前你也可以用servlet自己获取当前url及参数，就不用传了。

    以上这些参数除url外均可以从MyPager实例中获取。其实可以直接把mypager实例传进来，为了便于以后扩展，分字段传过来。
-->
<#macro fpage page pagesize totalpages totalrecords url>
    <li class="page-item"><span class="page-link">共条${totalrecords}记录&nbsp;&nbsp;第${page}页/共${totalpages}页</span></li>

    <#--startpage:起始页码就是page，endpage:结束页码，showfirstpage是否显示首页按钮，showlastpage：是否显示末页按钮，showpre是否显示前...，shownext是否显示后...-->
    <#assign startpage = page,endpage=10,showfirstpage=false,showlastpage=false,showpre=false,shownext=false,prepage = 1,nextpage=11>
    <#--是否显示首页按钮及计算初始页码-->
    <#if page gt 1>
        <#assign showfirstpage = true>
        <#--startpage向前挪4页，如果不足4页，则startpage=1-->
        <#assign startpage=(page-4)>
        <#if startpage lte 0>
            <#assign startpage = 1>
        </#if>
    </#if>
    <#--是否显示前n页的...，以及...的链接-->
    <#if page gt 5>
        <#assign showpre = true,prepage=page-5>
    </#if>
    <#--计算endpage-->
    <#if page+pagesize-1 lt totalpages>
        <#assign endpage = page+pagesize-1>
        <#--显示后面的...按钮-->
        <#assign shownext = true>
        <#--后面...的页面码-->
        <#assign nextpage=page+pagesize>
        <#--显示末页-->
        <#assign showlastpage = true>
    <#else>
        <#assign endpage = totalpages>
    </#if>
    <#if endpage lte 0>
        <#assign endpage = 1>
    </#if>

    <#--开始展示-->

    <#--首页-->
    <#if showfirstpage>
        <li class="page-item"><span><a class="page-link" href="${url}&page=1">首页</a></span></li>
    </#if>
    <#--前面的...-->
    <#if showpre>
        <li class="page-item"><span><a class="page-link" href="${url}&page=${prepage}">...</a></span></li>
    </#if>
    <#--显示的页码按钮-->
    <#list startpage..endpage as p>
        <li  class="page-item <#if p == page>active</#if>"><span><a class="page-link" href="${url}&page=${p}">${p}</a></span></li>
    </#list>
    <#--后面的...-->
    <#if shownext>
        <li class="page-item"><span><a class="page-link" href="${url}&page=${nextpage}">...</a></span></li>
    </#if>
    <#--显示尾页-->
    <#if showlastpage>
        <li class="page-item"><span><a class="page-link" href="${url}&page=${totalpages}">末页</a></span></li>
    </#if>
</#macro>

index.ftl

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>
<div class="container-fluid">
    <p>
        msyhbd.ttf是什么？msyhbd.ttf字体是微软雅黑粗体的英文缩写，微软雅黑可以说是目前应用最广泛的字体之一了，笔画清晰字形饱满，非常容易识别，需要的朋友快来绿色资源网下载吧！

        msyhbd字体介绍
        雅黑，又称微软雅黑，是微软公司为其新一代操作系统Vista开发的中文字体，它是迄今为止个人电脑上可以显示的最清晰的中文字体。

        微软雅黑Bold这个粗体不是单纯的将普通字符加粗，而是在具体笔画上分别进行处理，因此是独立的一个字体。

        msyhbd.ttf
    </p>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm">
            <table class="table">
                <thead class="thead-dark">
                <tr>
                    <th scope="col">id</th>
                    <th scope="col">登录名</th>
                    <th scope="col">姓名</th>
                    <th scope="col">mail</th>
                    <th scope="col">年龄</th>
                </tr>
                </thead>
                <tbody>
                <#list users.list as list>
                <tr>
                    <th scope="row">${list.user_id}</th>
                    <td>${list.login_name}</td>
                    <td>${list.user_name}</td>
                    <td>${list.mail}</td>
                    <td>${list.age}</td>
                </tr>
                </#list>
                </tbody>
            </table>
            <!--pager-->
           <#-- <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <#import "./public/page.ftl" as fpage />
                    <@fpage.fpage page=users.page pagesize=users.pagesize totalpages=users.totalpages totalrecords=users.totalrecords url="index.html?key=" />
                </ul>
            </nav>-->
        </div>
    </div> .
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

application.yml

spring:
  application:
    name: demo
  freemarker:
    allow-request-override: true
    cache: false
    check-template-location: true
    charset: UTF-8
    content-type: text/html; charset=utf-8
    expose-request-attributes: false
    expose-session-attributes: false
    expose-spring-macro-helpers: false
    suffix: .ftl
    template-loader-path: classpath:/templates
    settings:
      number_format: 0 # freemarker会自动将整型数字转换为千位分隔，不方便
    http:
      encoding:
        charset: utf-8
        force: true
server:
  port: 8088

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.demo</groupId>
    <artifactId>freemarker-page-demo</artifactId>
    <version>1.0-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version> 2.2.2.RELEASE</version>
    </parent>

    <dependencies>
        <!--web组件-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--lombok简化实体类的get set方法-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <!-- freemarker-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>

        <!-- itextpdf,导出pdf核心架包 -->
        <dependency>
            <groupId>com.itextpdf</groupId>
            <artifactId>itextpdf</artifactId>
            <version>5.5.11</version>
        </dependency>
        <!-- itextpdf工具包，用来解析html生成pdf -->
        <dependency>
            <groupId>com.itextpdf.tool</groupId>
            <artifactId>xmlworker</artifactId>
            <version>5.5.11</version>
        </dependency>
        <!-- flying saucer,支持对CSS高级特性的解析 -->
        <dependency>
            <groupId>org.xhtmlrenderer</groupId>
            <artifactId>flying-saucer-pdf</artifactId>
            <version>9.1.6</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.4</version>
        </dependency>
        <!-- 支持css样式渲染 -->
<!--        <dependency>-->
<!--            <groupId>org.xhtmlrenderer</groupId>-->
<!--            <artifactId>flying-saucer-pdf-itext5</artifactId>-->
<!--            <version>9.0.3</version>-->
<!--        </dependency>-->

        <!-- 支持中文 -->
        <dependency>
            <groupId>com.itextpdf</groupId>
            <artifactId>itext-asian</artifactId>
            <version>5.2.0</version>
        </dependency>
        <!--<dependency>
            <groupId>commons.codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.16</version>
        </dependency>-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>

    </dependencies>

    <build>
        <finalName>itextpdf</finalName>
    </build>

</project>

MyPager

package com.demo.util;

import lombok.Data;

import java.util.List;

/**
 * @program: zyproject
 * @description: 分页通用实体类
 * @author: zhouyu(zhouyu629 # qq.com)
 * @create: 2020-02-16
 **/
@Data
public class MyPager<T> {
    private int page; //当前页码，从1开始
    private int pagesize; //分页大小
    private int totalpages; //总页数
    private int totalrecords; //总记录数
    private List<T> list;
    //构造函数中计算总页数
    public MyPager(int page, int pagesize, int totalrecords, List<T> list){
        this.page = page;
        this.pagesize = pagesize;
        this.totalrecords = totalrecords;
        this.list = list;
        //计算总页数
        this.totalpages = totalrecords/pagesize;
        if(totalrecords%pagesize!=0){
            this.totalpages = this.totalpages + 1;
        };
    }
}

UserEntity

package com.demo.util;

import lombok.Data;

/**
 * @program: freemarker-page-demo
 * @description: 用户实体
 * @author: zhouyu(zhouyu629 # qq.com)
 * @create: 2020-03-07
 **/
@Data
public class UserEntity {
    private Integer user_id;
    private String user_name;
    private Integer age;
    private String login_name;
    private String mail;
}

IndexController

package com.demo.controller;

import com.demo.util.MyPager;
import com.demo.util.UserEntity;
import com.sun.org.apache.xpath.internal.operations.Mod;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

/**
 * @program: freemarker-page-demo
 * @description: demo首页
 * @author: zhouyu(zhouyu629 # qq.com)
 * @create: 2020-03-06
 **/
@Controller
public class IndexController {
    @RequestMapping("/index.html")
    public String index(@RequestParam(name = "page",defaultValue = "1") Integer page,
                     @RequestParam(name = "pagesize",defaultValue = "10") Integer pagesize,
                              Map<String,Object> map){
        //造一些分页数据
        List<UserEntity> list = new ArrayList<>();
        for(int i = ((page-1)*pagesize+1);i<((page-1)*pagesize+pagesize);i++){
            UserEntity userEntity = new UserEntity();
            userEntity.setAge(20);
            userEntity.setLogin_name("user"+i);
            userEntity.setMail("user"+i+"@gmail.com");
            userEntity.setUser_id(i);
            userEntity.setUser_name("user"+i);
            list.add(userEntity);
        }
        MyPager myPager = new MyPager(page,pagesize,500,list);
        map.put("users",myPager);
        return "/index";
    }
}

JavaToPdfHtml

package com.demo.controller;

import com.itextpdf.text.Document;
import com.itextpdf.text.DocumentException;
import com.itextpdf.text.pdf.PdfWriter;
import com.itextpdf.tool.xml.XMLWorkerFontProvider;
import com.itextpdf.tool.xml.XMLWorkerHelper;

import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.charset.Charset;

public class JavaToPdfHtml {


    private static final String DEST = "D:\\gitee\\freemarker-page-demo\\template.pdf";//输出地址
    private static final String HTML = "D:\\gitee\\freemarker-page-demo\\template.html";
    private static final String FONT = "D:\\gitee\\font\\simhei.ttf";


    public static void main(String[] args) throws IOException, DocumentException {
        // step 1
        Document document = new Document();
        // step 2
        PdfWriter writer = PdfWriter.getInstance(document, new FileOutputStream(DEST));
        // step 3
        document.open();
        // step 4
        XMLWorkerFontProvider fontImp = new XMLWorkerFontProvider(XMLWorkerFontProvider.DONTLOOKFORFONTS);
        fontImp.register(FONT);
        XMLWorkerHelper.getInstance().parseXHtml(writer, document,
                new FileInputStream(HTML), null, Charset.forName("UTF-8"), fontImp);
        // step 5
        document.close();
    }


}

JavaToPdfHtmlFreeMarker

package com.demo.controller;

import com.itextpdf.text.Document;
import com.itextpdf.text.DocumentException;
import com.itextpdf.text.pdf.PdfWriter;
import com.itextpdf.tool.xml.XMLWorkerFontProvider;
import com.itextpdf.tool.xml.XMLWorkerHelper;

import freemarker.template.Configuration;
import freemarker.template.Template;

import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.StringWriter;
import java.io.Writer;
import java.nio.charset.Charset;
import java.util.HashMap;
import java.util.Map;

public class JavaToPdfHtmlFreeMarker {

    private static final String DEST = "D:\\gitee\\freemarker-page-demo\\templateF.pdf";

    private static final String FTL = "D:\\gitee\\freemarker-page-demo\\";

    //名称
    private static final String HTML = "templateF.html";

    private static final String FONT = "D:\\gitee\\font\\simhei.ttf";

    private static Configuration freemarkerCfg = null;

    static {
        freemarkerCfg =new Configuration(Configuration.DEFAULT_INCOMPATIBLE_IMPROVEMENTS);
        //freemarker的模板目录
        try {
            //freemarkerCfg.
            freemarkerCfg.setDirectoryForTemplateLoading(new File(FTL));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public static void createPdf(String content,String dest) throws IOException, DocumentException {
        // step 1
        Document document = new Document();
        // step 2
        PdfWriter writer = PdfWriter.getInstance(document, new FileOutputStream(dest));
        // step 3
        document.open();
        // step 4
        XMLWorkerFontProvider fontImp = new XMLWorkerFontProvider(XMLWorkerFontProvider.DONTLOOKFORFONTS);
        fontImp.register(FONT);
        XMLWorkerHelper.getInstance().parseXHtml(writer, document,
                new ByteArrayInputStream(content.getBytes()), null, Charset.forName("UTF-8"), fontImp);
        // step 5
        document.close();

    }

    /**
     * freemarker渲染html
     */
    public static String freeMarkerRender(Map<String, Object> data, String htmlTmp) {
        Writer out = new StringWriter();
        try {
            // 获取模板,并设置编码方式
            Template template = freemarkerCfg.getTemplate(htmlTmp);
            template.setEncoding("UTF-8");
            // 合并数据模型与模板
            template.process(data, out); //将合并后的数据和模板写入到流中，这里使用的字符流
            out.flush();
            return out.toString();
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                out.close();
            } catch (IOException ex) {
                ex.printStackTrace();
            }
        }
        return null;
    }

    public static void main(String[] args) throws IOException, DocumentException {
        Map<String,Object> data = new HashMap();
        data.put("name","路飛.祖克");
        String content = JavaToPdfHtmlFreeMarker.freeMarkerRender(data, HTML);
        JavaToPdfHtmlFreeMarker.createPdf(content, DEST);
    }
}

JavaToPdfHtmlFreeMarkerCss

package com.demo.controller;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.StringWriter;
import java.io.Writer;
import java.util.HashMap;
import java.util.Map;

import org.apache.tomcat.util.codec.binary.Base64;
import org.xhtmlrenderer.pdf.ITextFontResolver;
import org.xhtmlrenderer.pdf.ITextRenderer;

import com.itextpdf.text.DocumentException;
import com.itextpdf.text.pdf.BaseFont;

import freemarker.template.Configuration;
import freemarker.template.Template;
public class JavaToPdfHtmlFreeMarkerCss {

    private static final String FTL = "D:\\gitee\\freemarker-page-demo\\";

    //加了CSS
    //private static final String DEST = "D:\\gitee\\freemarker-page-demo\\templateFCss.pdf";
    //private static final String HTML = "templateFCss.html";

    //分页
    private static final String DEST = "D:\\gitee\\freemarker-page-demo\\templateFCssPage.pdf";
    private static final String HTML = "templateFCssPage.html";

    //分页时，有些东西会被隔开怎么办，要不要另起一页开始?
    //CCS可以幫到你 page-break-inside:avoid;這個是可以避免分頁的
    //private static final String DEST = "D:\\gitee\\freemarker-page-demo\\templateFCssNotPage.pdf";
   //private static final String HTML = "templateFCssNotPage.html";


    private static final String FONT = "D:\\gitee\\font\\simhei.ttf";
    private static final String FONT_C = "D:\\gitee\\font\\calibri.ttf";
    private static final String FONT_S = "D:\\gitee\\font\\simsun.ttc";

    private static final String LOGO_PATH = "D:\\gitee\\freemarker-page-demo\\logo.jpg";

    private static Configuration freemarkerCfg = null;

    static {
        freemarkerCfg =new Configuration(Configuration.DEFAULT_INCOMPATIBLE_IMPROVEMENTS);
        //freemarker的模板目录
        try {
            freemarkerCfg.setDirectoryForTemplateLoading(new File(FTL));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) throws IOException, DocumentException, com.lowagie.text.DocumentException {
        Map<String,Object> data = new HashMap<String,Object>();
        data.put("name","路奇.D.艾尼路 儸傑");
        File file=new File(LOGO_PATH);
        data.put("fileType","image/jpeg");
        data.put("file64Str",fileToBase64Str(file));
        String content =freeMarkerRender(data,HTML);
        //System.out.println(content);
        createPdf(content,DEST);

    }

    /**
     * freemarker渲染html
     */
    public static String freeMarkerRender(Map<String, Object> data, String htmlTmp) {
        Writer out = new StringWriter();
        try {
            // 获取模板,并设置编码方式
            Template template = freemarkerCfg.getTemplate(htmlTmp);
            template.setEncoding("UTF-8");
            // 合并数据模型与模板
            template.process(data, out); //将合并后的数据和模板写入到流中，这里使用的字符流
            out.flush();
            return out.toString();
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                out.close();
            } catch (IOException ex) {
                ex.printStackTrace();
            }
        }
        return null;
    }

    public static void createPdf(String content,String dest) throws IOException, DocumentException, com.lowagie.text.DocumentException {
        ITextRenderer render = new ITextRenderer();

        //设置字体
        ITextFontResolver fontResolver = render.getFontResolver();
        fontResolver.addFont(FONT_S, BaseFont.IDENTITY_H, BaseFont.EMBEDDED);
        fontResolver.addFont(FONT, BaseFont.IDENTITY_H, BaseFont.EMBEDDED);
        fontResolver.addFont(FONT_C, BaseFont.IDENTITY_H, BaseFont.EMBEDDED);
        // 解析html生成pdf
        render.setDocumentFromString(content);
        render.layout();
        render.createPDF(new FileOutputStream(dest));
        render.finishPDF();
    }


    /**
     * File to 64bit Str
     *
     * @param file
     * @return
     */
    public static String fileToBase64Str(File file) {
        byte[] data = null;
        InputStream inputStream = null;
        if (file != null) {
            try {
                inputStream = new FileInputStream(file);
                data = new byte[inputStream.available()];
                inputStream.read(data);
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                try {
                    inputStream.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            return Base64.encodeBase64String(data);
        }
        return null;
    }
}

templateFCssPage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <style>
        body{
            font-family:SimHei;
        }
        .color{
            color: green;
        }
        .pos{
            position:absolute;
            left:200px;
            top:5px;
            width: 200px;
            font-size: 10px;
        }
         @media print {
            div.header-right {
                display: block;
                position: running(header-right);
            }
        }

		@media screen {
			div.divFooter {
				display: none;
			}}

		@media print {
			div.divFooter {
				position: fixed;
				top: 0;
			}}

         @page {
            size: 8.5in 11in;
 
            @top-right {
                content: element(header-right)
            };
 
            /*@bottom-center {
                content : "Page " counter(page) " of " counter(pages);
            };	 */
            @bottom-center {
                content: element(footer)
            }
        }
        
        #footer {
            position: running(footer);
        }
            
        #pages:before {
            content: counter(page);
        }
 
        #pages:after {
            content: counter(pages);
        }
        
    </style>
</head>
<body>


	<div class="divFooter">UNCLASSIFIED</div>

  	<div id="footer">
        <div style="text-align: center; width: 100%;font-size: 15px;">Page <span id="pages"> of </span></div>
    </div>
	<div class="page">
		<div class="color">你好，${name}222</div>
		<img src="data:${fileType};base64,${file64Str}" width="600px" />
		<table border="1">
			<tr>
				<th>Month</th>
				<th>Savings</th>			
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
		</table>
	</div>
 
</body>
</html>

templateFCssNotPage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <style>
        body{
            font-family:SimHei;
        }
        .color{
            color: green;
        }
        .pos{
            position:absolute;
            left:200px;
            top:5px;
            width: 200px;
            font-size: 10px;
        }
         @media print {
            div.header-right {
                display: block;
                position: running(header-right);
            }
            
           img{page-break-inside:avoid;}
           table{page-break-inside:avoid;}
        }
         @page {
            size: 8.5in 11in;
 
            @top-right {
                content: element(header-right)
            };
 
            /*@bottom-center {
                content : "Page " counter(page) " of " counter(pages);
            };	 */
            @bottom-center {
                content: element(footer)
            }
        }
        
        #footer {
            position: running(footer);
        }
            
        #pages:before {
            content: counter(page);
        }
 
        #pages:after {
            content: counter(pages);
        }
        
    </style>
</head>
<body>
 
  <div id="footer">
        <div style="text-align: center; width: 100%;font-size: 15px;">Page <span id="pages"> of </span></div>
    </div>
	<div class="page">
		<div class="color">你好，${name}222</div>
		<img src="data:${fileType};base64,${file64Str}" width="600px" />
		<table border="1">
			<tr>
				<th>Month</th>
				<th>Savings</th>			
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr><tr>
				<td>January</td>
				<td>$100</td>
			</tr>
		</table>
	</div>
 
 
</body>
</html>

templateFCss.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <style>
        body{
            font-family:SimHei;
        }
        .color{
            color: green;
        }
        .pos{
            position:absolute;
            left:200px;
            top:5px;
            width: 200px;
            font-size: 10px;
        }
         @media print {
            div.header-right {
                display: block;
                position: running(header-right);
            }
        }
         @page {
            size: 8.5in 11in;
 
            @top-right {
                content: element(header-right)
            };
 
            /*@bottom-center {
                content : "Page " counter(page) " of " counter(pages);
            };	 */
            @bottom-center {
                content: element(footer)
            }
        }
        
        #footer {
            position: running(footer);
        }
            
        #pages:before {
            content: counter(page);
        }
 
        #pages:after {
            content: counter(pages);
        }
        
    </style>
</head>
<body>
 
  <div id="footer">
        <div style="text-align: center; width: 100%;font-size: 15px;">Page <span id="pages"> of </span></div>
    </div>
	<div class="page">
		<div class="color">你好，${name}222</div>
		<img src="data:${fileType};base64,${file64Str}" width="600px" />
	</div>
 
</body>
</html>

templateF.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
body {
	font-family: SimHei;
}
 
.red {
	color: red;
}
</style>
</head>
<body>
 
	<div class="red">hello world!</div>
	<div class="red">你好，${name}</div>
</body>
</html>

template.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
body {
	font-family: SimHei;
}
 
.red {
	color: red;
}
</style>
</head>
<body>
 
	<div class="red">hello world!</div>
	<div class="red">你好，祖克</div>
</body>
</html>