参考: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}记录 第${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>