Vue中Pdf预览及打印(自定义组件)
2024-06-04 20:45:52
思路:
1. vue中使用ifream访问后台
2.封装共用vue组件
3.后台通过freemaker模板生成相应pdf
效果:
编写自定义组件PdfView.vue
<template><div><pdf ref="myPdfComponent" hidden :src="this.url"></pdf>
<!-- 第一种 pdf展示-->
<!-- <div style="height: 800px;overflow-y: auto;text-align: center;background-color: #525659;">-->
<!-- <pdf-->
<!-- v-for="i in numPages"-->
<!-- :key="i"-->
<!-- :src="src"-->
<!-- :page="i"-->
<!-- style="display: inline-block;width: 800px;text-align: center;margin-top: 10px;"-->
<!-- ></pdf>-->
<!-- </div>--><!-- 第二种 iframe展示--><iframe :src="url" frameborder="0" style="width: 100%; height: 700px;"></iframe><div style="text-align: center;"><a-button type="primary" style="width: 120px;" icon="printer" @click="$refs.myPdfComponent.print()">打印</a-button></div></div>
</template><script>import pdf from 'vue-pdf'export default {components: {pdf},data () {return {// src: pdf.createLoadingTask(this.url),// numPages: undefined}},props: ['url'],mounted () {// this.src.promise.then(pdf => {// this.numPages = pdf.numPages// })}}
</script>
组件调用
<a-col :span="18"><pdf-view :url="printSrc"></pdf-view></a-col>iframe跳转地址
_self.printSrc = _self.baseUrl + '/pc/pdf/demoPrintPDF?familyId=' + _self.family.id + '&time=' + new Date().getTime() + "#toolbar=0";
后台方法
1. 访问方法
/*** pdf模板预览*/@RequestMapping("demoPrintPDF")public void demoPrintPDF(HttpServletRequest request, HttpServletResponse response) throws Exception {//freemaker中的数据mapMap<String, Object> data = Maps.newHashMap();String template = "oncePrintPDF.html";String date = DateUtils.dateToStringFormat(new Date(), "yyyy年MM月dd日");data.put("dateStr", date);this.commonPrintPDF(data, template, response);}2. 公共打印方法
/*** 公共打印方法** @param map 数据map* @param template 打印模板文件* @throws Exception*/private void commonPrintPDF(Map<String, Object> map, String template, HttpServletResponse response) throws Exception {PdfDocumentGenerator pdfDocumentGenerator = new PdfDocumentGenerator();OutputStream outputStream = null;response.setHeader("Expires", "0");response.setHeader("Cache-Control", "must-revalidate, post-check=0, pre-check=0");outputStream = response.getOutputStream();pdfDocumentGenerator.generate(template, map, outputStream);}3.PdfDocumentGenerator
package com.app.system.utils.pdf;import com.app.system.log4j2.LogUtils;
import org.slf4j.Logger;
import org.springframework.util.ResourceUtils;
import org.w3c.dom.Document;
import org.xhtmlrenderer.pdf.ITextFontResolver;
import org.xhtmlrenderer.pdf.ITextRenderer;import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Map;/*** PDF流加载* Created by m`jj on 2019/1/16.*/
@SuppressWarnings("all")
public class PdfDocumentGenerator {private static Logger logger = LogUtils.getBusinessLogger();public boolean generate(String template, Map<String, Object> variables, OutputStream outputStream) throws Exception {try {HtmlGenerator e = new HtmlGenerator();String htmlContent = e.generate(template, variables);this.generate(htmlContent, outputStream);} catch (Exception var6) {logger.error(var6.toString());}return true;}public void generate(String htmlContent, OutputStream outputStream) throws Exception {Object out = null;try {DocumentBuilder e = DocumentBuilderFactory.newInstance().newDocumentBuilder();Document doc = e.parse(new ByteArrayInputStream(htmlContent.getBytes("UTF-8")));try {ITextRenderer e1 = this.createTextRenderer();e1.setDocument(doc, (String) null);e1.layout();e1.createPDF(outputStream);} catch (Exception var11) {logger.error(var11.toString());}} catch (Exception var12) {throw var12;} finally {if (out != null) {((OutputStream) out).close();}}}public ITextRenderer createTextRenderer() {ITextRenderer renderer = new ITextRenderer();ITextFontResolver fontResolver = renderer.getFontResolver();addFonts(fontResolver);return renderer;}public static ITextFontResolver addFonts(ITextFontResolver fontResolver) {String fontPath = null;try {fontPath = ResourceUtils.getURL("classpath:").getPath() + "static/fonts";} catch (IOException var2) {var2.printStackTrace();}File fontsDir = new File(fontPath);logger.debug("fontPath=" + fontsDir.getAbsolutePath());if (fontsDir != null && fontsDir.isDirectory()) {File[] files = fontsDir.listFiles();File[] arr = files;int len = files.length;for (int i = 0; i < len; ++i) {File file = arr[i];if (!file.isDirectory()) {try {logger.debug("字体文件：" + file.getAbsolutePath());fontResolver.addFont(file.getAbsolutePath(), "Identity-H", false);} catch (Exception var9) {logger.debug("字体加载：" + var9.getMessage());var9.printStackTrace();}}}}return fontResolver;}
}
4. HtmlGenerator
package com.app.system.utils.pdf;import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;import java.io.BufferedWriter;
import java.io.IOException;
import java.io.StringWriter;
import java.util.Map;/*** Created by m`jj on 2019/1/16.*/
@SuppressWarnings("all")
public class HtmlGenerator {public String generate(String template, Map<String, Object> variables) throws IOException, TemplateException {BufferedWriter writer = null;StringWriter stringWriter = null;String htmlContent = "";try {Configuration e = FreemarkerConfiguration.getConfiguration();e.setDefaultEncoding("utf-8");Template tp = e.getTemplate(template);stringWriter = new StringWriter();writer = new BufferedWriter(stringWriter);tp.process(variables, writer);htmlContent = stringWriter.toString();writer.flush();} finally {try {if(stringWriter != null) {stringWriter.close();}} catch (Exception var13) {;}if(writer != null) {writer.close();}}return htmlContent;}
}
5.FreemarkerConfiguration
import com.app.system.utils.WebUtils;
import freemarker.template.Configuration;import java.io.File;
import java.io.IOException;@SuppressWarnings("all")
public class FreemarkerConfiguration {private static Configuration config = null;private FreemarkerConfiguration() {}public static synchronized Configuration getConfiguration() {if (config == null) {setConfiguration();}return config;}private static void setConfiguration() {config = new Configuration();String path = null;try {path = WebUtils.getRootPath() + "printPdf";config.setDirectoryForTemplateLoading(new File(path));} catch (IOException var2) {var2.printStackTrace();}}
}
6.freemaker模板及字体文件存放位置
7.freemaker模板
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>转办模板</title><style>body {font-family: SimSun, Arial Unicode MS, Lucida Sans Unicode, Arial, verdana, arial, helvetica, sans-serif;}.printContent {margin: 0px;padding: 0px;width: 700px;font-size: 16px;clear: both;}.printContent p {margin: 5px 0;padding: 0px;text-align: left;text-indent: 2em;line-height: 20px;}.printContent .printTitle {clear: both;text-indent: 0em;font-size: 28px;text-align: center;line-height: 30px;font-weight: bold;}.dataTable {width: 99%;border-top: 1px solid #000000;border-left: 1px solid #000000;border-spacing: inherit;line-height: 24px;-fs-table-paginate: paginate; /*处理分页断行问题*/}.dataTable tr {height: 24px;}.dataTable tr td {text-align: center;padding: 2px;border-right: 1px solid #000000;border-bottom: 1px solid #000000;line-height: 50px;}.dataTable tr > td:first-child {width: 150px;}.border {padding-left: 20px;padding-right: 20px;border-bottom: 1px solid #000000;}.pageBreak {page-break-before: always}@page {@bottom-right {content: element(footer);}}#pagenumber:before {content: counter(page);}#pagecount:before {content: counter(pages);}@page {margin: 5mm 5mm 10mm 11mm;}.printRight {margin-left: 75% !important;line-height: 50px !important;}</style>
</head>
<body>
<div class="printContent"><p class="printTitle" style="padding-top: 100px;">朝阳区房屋管理局12345退单情况说明</p><p style="margin-top: 20px">签字要求：科长、主管主任、中心主任右上角签字</p><table class="dataTable"><tr><td>案件编号</td><td></td></tr><tr><td style="line-height: 300px">案件内容</td><td></td></tr><tr><td>转派单位</td><td></td></tr><tr><td style="line-height: 300px">转派依据</td><td></td></tr></table><p class="printRight" style="margin-top: 30px">朝阳区房屋管理局</p><p class="printRight">${dateStr}</p>
</div>
</body>
</html>8.字体文件: https://wws.lanzous.com/i6xoxjw9v9a
Vue中Pdf预览及打印(自定义组件)相关推荐
- vue中pdf预览组件_Vue+ElementUI使用vue-pdf实现预览功能
Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应 ...
- VUE-PDF VUE的PDF预览组件
VUE-PDF VUE的PDF预览组件 vue.js pdf viewer 安装 npm install --save vue-pdf 示例 <template><pdf src=& ...
- vue的PDF预览插件(vue-pdf)，支持旋转、放大缩小、打印、下载等
PDF预览插件 1.安装插件(vue-pdf) 2.引用注册pdf组件 3.pdf 常用属性与方法调用 4.常见报错 1.安装插件(vue-pdf) npm i pdfjs-dist@2.5.207 ...
- 实现微信小程序和手机app（基于vue）PDF预览功能
引言:最近在做微信小程序和手机端app开发(基于vue),实现一个pdf预览功能. 需求:点击pdf列表,跳转到预览pdf页面,页面上强制阅读10s后,显示一个按钮返回,更新阅读状态: 要求:不能调用 ...
- 控制chrome中PDF预览工具栏
在实际开发中,遇到使用chrome自带的PDF预览功能,前端把后台返回的地址,通过XMLHttpRequest转换成blob,并在blob地址后拼接上文件名称,通过创建embed展示PDF: 这种方法 ...
- 不同的电脑打印预览不同怎么解决_条码打印软件中标签预览正常打印无反应怎么解决...
在使用条码打印软件制作标签时,有客户反馈,标签打印预览正常的,但是打印无反应,咨询是怎么回事?今天针对这个情况,可以参考以下方法进行解决. 一.预览正常情况下,打印没反应 (1)在条码打印软件中设计好 ...
- vue pdf预览禁止打印
1.肯定是先安装了: npm i pdfobject --save 2.引入 import pdf from 'pdfobject' <template><div><p ...
- vue+element pdf预览
demo 链接:https://pan.baidu.com/s/1g05Jsi4th-LpiHooOLjPAg 提取码:7777
- vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...
最新文章
- 线上SQL脚本执行错了出事之后互相甩锅怎么办?
- Popupwin结合Timer实现定时弹出消息提示
- ASP.NET2.0中用ICallbackEventHandler实现客户端与服务器端异步交互
- hazelcast 使用_使用Hazelcast发布和订阅
- 比赛正式开始的openeim001
- PyTorch 1.0 中文官方教程：词嵌入：编码形式的词汇语义
- amos调节变量怎么画_AMOS 中验证性因素分析（CFA）
- Mysql约束 笔记
- 实验9Linux共享内存通信,操作系统原理与Linux实践教程(卓越工程师培养计划系列教材)...
- gparted调整分区大小_CentOS Linux系统中用parted分区命令分区
- Select2 鼠标点击空白处不消失简单测试和解决方法
- Leetcode怎么调试java代码,LeetCode–正则表达式匹配
- 文档中的公式编号怎么不从1开始
- PTAM在Linux下编译运行
- android 会自动横屏再竖屏,Android横屏竖屏切换的问题
- 游戏虚拟引擎自学_自学5个小时，如何做出一个游戏？
- 计算机机房的消防验收,机房消防标准方案.doc
- h5实现图片预览效果，模拟淘宝上传图片样式
- 新版本读取老版本文件崩溃BUG
- 团队管理的四大挑战——裁人篇