使用 vue-pdf 以及Lodop实现pdf打印预览功能
1.首先下载vue-pdf : npm install vue-pdf --dev
踩坑: 页面第一次渲染没有问题,但是二次打开PDF的时候会遇到PDF空白的问题,控制台提示:Error during font loading: Failed to execute ‘postMessage’ on ‘Worker’: ArrayBuffer at index 0 is already detached
翻找半天发现是因为缓存问题,然后找到了一个大佬的博客, 二次封装的这个包
附上地址:https://blog.csdn.net/chenzhiyong12/article/details/109410200
//替换vue-pdf
npm install --save vue-pdf-signature
template部分
<el-button class="filter-item" type="primary" @click="printingShopee">测试报表打印</el-button><pdf :src="testSrc"/>
script部分:
import pdf from 'vue-pdf-signature'
// 解决部分文字不显示的问题
import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory.js'
data() {return {testSrc: '',}}
components: {pdf},methods: {printingShopee() {// testSrcconst data = {"param":{"patientName":"蒲静111","diagnoseId":"0004944952","recipeName":"hhhhhhh","queueName":"哈哈哈","lateSignDate":"okkkkk","filmingNo":"13123","sex":"111","sns":"'287015638468063232','287015672471285760','288526367125860352'"},"reportCode":"1619747236132"}// download 请求后端接口download(data).then(res => {console.log(res)if(res.code === 200) {// res.result 为base64位的码let datas = 'data:application/pdf;base64,' + res.resultthis.testSrc = pdf.createLoadingTask({ url: datas, CMapReaderFactory });console.log(this.testSrc)setTimeout(() => {// 通过调试检查发现pdf预览的页面是canvas绘成的var printContent = document.getElementsByTagName('canvas')[0];console.log(printContent)var dataUrl = printContent.toDataURL(); // 转成base64console.log(printContent)console.log(dataUrl)LODOP.PRINT_INIT("测试PDF打印功能");LODOP.SET_PRINT_PAGESIZE(3, 780, 100, '')// LODOP.ADD_PRINT_IMAGE("0mm","0mm","RightMargin:0mm","BottomMargin:0mm",dataUrl);LODOP.ADD_PRINT_IMAGE(0, 0, '100%', '100%', dataUrl)LODOP.SET_PRINT_STYLEA(0,"Stretch",2);//(不可变形)扩展缩放模式// LODOP.SET_PRINTER_INDEX(LODOP.GET_PRINTER_NAME(-1))// LODOP.PRINT()LODOP.PREVIEW(); //预览打印},2000)}})},
}
但是我们业务要求不预览 直接打印,
但是canvas, 必要设置width,height属性, 或不能将display设为none, 否则打印的canvas对象就是一个空对象,那它返回的 toDataURL()就为空 data:
所以这个很致命 目前只能给最外层的父元素设置了宽和高 将 pdf组件放到页面内容外
使用 vue-pdf 以及Lodop实现pdf打印预览功能相关推荐
- C#实现打印与打印预览功能
C#实现打印与打印预览功能 发表日期:2010年12月31日 作者:whitewin 点击:102次 在windows应用程序中文档的打印是一项非常重要的功能,在以前一直是一个非常复杂的工作,Micr ...
- 网页中JS实现(调用)打印预览功能
近期的项目中需要在页面中实现打印预览功能--点击网页中的"打印"(Print),弹出打印预览窗口,点击窗口页面中的"开始打印"(Print),则出现浏览器的打印 ...
- DELPHI 打印预览功能
在很多应用程序中,都需要程序具有打印预览功能,以避免用户由于选择不当出现打印错误. 预览实现方式为通过创建一个Tpanel的派生类并公开它的canvas属性比例尺或视区范围,使用较为不方便,笔者通过实 ...
- MFC 基于多文档的打印和打印预览功能的实现
一.基础知识 1 网上有很多的关于打印的程序,一定要看清楚,是基于对话框dialog的打印功能,还是基于文档的打印功能. 如果分不清基于对话框和文档的区别,建议新建一个单文档.多文档和对话框的工程,看 ...
- 敲的php代码怎么预览,php如何实现打印预览功能
php实现打印预览功能的方法:首先获取当前页的html代码:然后设置打印开始区域和打印结束区域:接着从开始和结束代码向后取html:最好确定要打印的内容即可. 推荐:<PHP视频教程> p ...
- 纯手写table展示树形数据,实现浏览器打印预览功能
更新: 略显尴尬,在测试进行了各种数据测试之后,发现处理数据还是有些问题,有问题才能进步嘛,哈哈哈,还好发现及时,今天下午又进行了修改,对合并数据的地方修改了很多,详细内容见新的dealData方法: ...
- html页面实现打印预览功能,js实现打印、页面设置、打印预览功能
javascript打印-打印页面设置-打印预览代码 function printsetup(){ // 打印页面设置 wb.execwb(8,1); } function printpreview( ...
- react项目中实现打印预览功能
最近项目中,前端采用react+antd+dva的组合, 今天有一个新需求, 需要在后台管理系统中实现 点击打印 完成指定页面的打印功能. 我们道浏览器带有打印功能的实现,window.print() ...
- 浏览器点击pdf的链接——实现下载或预览功能——基础积累
最近在做后台管理系统时,遇到了一个需求,就是点击pdf链接时,需要实现文档的下载. 点击链接,通常就会用到a标签,将链接放在href参数中,点击时就会触发相应的事件了. 常规写法如下: <a : ...
- java调用打印预览_急求一个用Java实现的打印及打印预览功能的Demo
展开全部 package com.szallcom.tools; import java.awt.BorderLayout; import java.awt.Color; import java.aw ...
最新文章
- 【清华集训2017】榕树之心
- Asp.net MVC, 谁吃了我的id参数值?
- 训练深度神经网络的时候需要注意的一些小技巧
- 我的春招求职经验分享(已拿阿里京东网易等 5 个 offer)
- Boost:可移植地自定义boost :: hash的测试程序
- GIT的基本操作(建立自己的git远程仓库)
- postman 发送json请求
- where is document CURRENCY field stored
- 有1~5000一组乱序数列,请使用伪代码对该数进行排列
- HQL写topN、Spark写topN
- 重磅!MobileNetV3 来了!
- Elasticsearch-head插件的安装与使用
- 《趣学JavaScript——教孩子学编程》——1.5 本章小结
- Java初学者也可以实现的图书系统小练习
- php fakepath,javascript - chrome upload file 出现 fakepath,请解决方案
- php0day,Nginx 0day漏洞—却原来是php漏洞
- EXCEL合并单元格内容并换行显示
- 互联网金融指导意见或引发P2P跑路狂潮
- 【调剂】上海海洋大学大数据和遥感方向接收硕士调剂
- 【php毕业设计】基于php+mysql+mvc的网上留言管理系统设计与实现(毕业论文+程序源码)——网上留言管理系统