SpringBoot pdf打印及预览(openhtmltopdf+freemarker)
Posted 多喝灬丶烫水博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SpringBoot pdf打印及预览(openhtmltopdf+freemarker)相关的知识，希望对你有一定的参考价值。
SpringBoot pdf打印及预览(openhtmltopdf+freemarker)
- 添加依赖
<properties>
<openhtml.version>1.0.10</openhtml.version>
</properties>
<!--openhtmltopdf -->
<dependencies>
<dependency>
<!-- ALWAYS required, usually included transitively. -->
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-core</artifactId>
<version>$openhtml.version</version>
</dependency>
<dependency>
<!-- Required for PDF output. -->
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-pdfbox</artifactId>
<version>$openhtml.version</version>
</dependency>
<dependency>
<!-- Optional, leave out if you do not need logging via slf4j. -->
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-slf4j</artifactId>
<version>$openhtml.version</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
</dependencies>
- 在/resources/template/view/html新建模板xxx.ftl文件
<html>
<head>
<meta charset="UTF-8"/>
<style>
/* 特有css样式自行参考官网 */
@page
size: a4;
@top-left
content: element(header-left);
@top-center
content: element(header-center);
@top-right
content: element(header-right);
@bottom-center
font-size: 14px;
content: counter(page);
font-family: \'simsun\', serif;
margin: 50px;
*
margin: 0;
padding: 0;
font-family: \'simsun\', serif;
#page-header-left
font-size: 10px;
font-weight: bold;
position: running(header-left);
#page-header-center
font-size: 10px;
font-weight: bold;
position: running(header-center);
#page-header-right
font-size: 10px;
font-weight: bold;
position: running(header-right);
table
width: 100%;
font-size: 14px;
border-collapse: collapse;
font-family: \'simsun\', serif;
border-spacing: 0;
/* The magical table pagination property. */
/*-fs-table-paginate: paginate;*/
/* Recommended to avoid leaving thead on a page by itself. */
-fs-page-break-min-height: 0.5cm;
border-left: 0.07cm solid black;
border-right: 0.07cm solid black;
border-bottom: 0.03cm solid black;
.checkbox
display: inline-block;
position: relative;
top: 1px;
width: 10px;
height: 10px;
border: 1px solid black;
.correct
display: inline-block;
position: relative;
top: 2px;
right: 15px;
width: 7px;
height: 3px;
border-left: 1px solid black;
border-bottom: 1px solid black;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin-right: -16px;
input[type = "checkbox"]
width: 10px;
height: 10px;
border: 1px solid black;
tr, thead, tfoot
page-break-inside: avoid;
td, th
page-break-inside: avoid;
font-family: \'simsun\', serif;
padding: 1px;
border-top: 0.03cm solid black;
border-left: 0.03cm solid black;
td:first-child, th:first-child
border-left: 0;
#table-title
text-align: center;
margin-top: 0;
margin-bottom: 5px;
font-weight: bold;
</style>
</head>
<body>
<div class="header-box">
<div id="page-header-left">
<span id="page-header-text">编号：<span >$code!\'\'</span></span>
</div>
<div id="page-header-center">
<span id="page-header-text">时间 <sup>1)</sup>：<span
>$time?date!\'\'</span></span>
</div>
</div>
<div class="basic-box">
<table >
<tr>
<td>标题1</td>
<td>$xx1!\'\'</td>
<td>标题2</td>
<td>$xx2!\'\'</td>
<td>标题3</td>
<td>$xx3!\'\'</td>
</tr>
<tr>
<td >结果</td>
<td colspan="3" >
<div>
<div class="checkbox"></div>
<#if result??&&result == \'1\'>
<div class="correct"></div>
</#if>
<div >合格</div>
<div class="checkbox"></div>
<#if result??&&result == \'0\'>
<div class="correct"></div>
</#if>
<div >不合格</div>
</div>
</td>
<td colspan="4" >签字人：</td>
</tr>
</table>
</div>
</body>
</html>
- controller接口
@RequestMapping(value = "/print/pdf/code", produces = MediaType.APPLICATION_PDF_VALUE)
public ResponseEntity<byte[]> printPdf(@PathVariable("code") String detectCode) throws IOException, TemplateException
Assert.hasText(code, "code不能为空");
return detectReportPrintService.findPdf(code);
- service实现类
vue-pdf插件实现pdf上传预览下载预览打印下载
[vue-pdf] npm连接:https://www.npmjs.com/package/vue-pdf
安装vue-pdf
npm i vue-pdf1.解决字体问题
将node_modules/pdfjs-dist/cmaps文件夹复制到public文件夹下 (找不到的可以看下代码怎么写的，node_modules/vue-pdf/src/CMapReaderFactory.js)
2.上传预览
<template> <div> <el-upload class="upload-demo" drag action="#" :auto-upload="false" :on-change=\'fileChange\' :limit=\'1\' multiple> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip"> 只能上传jpg/png文件，且不超过500kb </div> </el-upload> <pdf :src="pdfURL"></pdf> </div> </template>
<script>
import pdf from "vue-pdf";
export default {
components: {
pdf,
},
data() {
return {
pdfURL: "",
};
},
methods: {
fileChange(file){
//拿到上传的文件
let file=file.raw
//转成二进制
let blob=new Blob([file])
//本地创建新的连接地址
this.pdfURL=URL.createObjectURL(blob)
//解决字体问题、第二次加载字体不显示问题
this.pdfURL= pdf.createLoadingTask({
url: this.pdfURL ,
cMapUrl: \'/cmaps/\',
cMapPacked: true})
}
},
};
</script>2. 下载预览
3.打印
4.下载
有空更新
以上是关于SpringBoot pdf打印及预览(openhtmltopdf+freemarker)的主要内容，如果未能解决你的问题，请参考以下文章