Vue项目实现在线预览pdf,并且可以批量打印pdf

最近遇到一个需求,就是要在页面上呈现pdf内容,并且还能用打印机批量打印pdf,最终效果如下:
在这里插入图片描述
当用户在列表页面,勾选中两条数据后,点击“打印表单”按钮之后,会跳到如下的预览页面:

请添加图片描述
请添加图片描述
预览页面顶部有个吸顶的效果,然后下方就展示出了2个pdf文件对应的内容,我们接着点击“打印”按钮,就会打开新的窗口,并且会出来打印窗口,如下图:
请添加图片描述
这里需要注意的是,我们在打印时需要取消默认的页眉页脚的勾,然后将边距改为无,这样就能保证打印的页面无页眉页脚且是居中显示内容的了,目标打印机选择好,点击"打印"就能打了。现在我们来捋一下整个过程的实现方法及思路:

1.列表页面里,我们点击“打印表单”方法里要先判断用户有没有打钩勾选,有没有勾选中已经上传过打印模版的表单(有templateId就是已经上传过打印模版的表单),都满足后路由跳到预览页FormPreview,代码如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/2995.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

echarts 地图点击常见问题

echats 散点图不支持缩放 echarts 地图点击激活label如何去除 高德loca 1.4版本热力图报错 绘制的颜色区间是 0 --1 高德地图销毁不生效 自己傻逼,每次没有清空数组导致叠加数据,约点数据越多。 为何用高德地图district.search查询不到别的省数据&…

[微信小程序] movable-view 可移动视图容器 - 范围问题

movable-view 可移动视图容器 可移动视图容器&#xff0c;在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中&#xff0c;并且必须是直接子节点 <view><movable-area style"width: 750rpx;height: 200rpx;background-color: gainsboro;">&l…

Java的数据结构-Map集合

文章目录 Map概述Map常用方法Map遍历元素的方法1.方法一&#xff1a;keySet()2.方法二&#xff1a;entrySet() HashMap Map概述 1、Map和collection没有继承关系2、Map集合以key和value的方式存储数据&#xff1a;键值对key和value都是引用数据类型。key和value都是存储对象的…

(栈队列堆) 剑指 Offer 31. 栈的压入、弹出序列 ——【Leetcode每日一题】

❓ 剑指 Offer 31. 栈的压入、弹出序列 难度&#xff1a;中等 输入两个整数序列&#xff0c;第一个序列表示栈的压入顺序&#xff0c;请判断第二个序列是否为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如&#xff0c;序列 {1,2,3,4,5} 是某栈的压栈序列&#xff0c;序…

Appium Android ——利用 TestNG 并行执行用例

目录 前言&#xff1a; 一、测试类 二、连接两个 Android 设备或启动两个虚拟机 三、项目路径下新建两个 testng.xml 四、开启两个 appium server 五、导出依赖 六、执行测试 七、查看报告 前言&#xff1a; Appium是一个流行的移动应用自动化测试工具&#xff0c;…

使用semanage管理SELinux安全策略

semanage命令用于管理SELinux的策略&#xff0c;格式为“semanage [选项] [文件]”。 SELinux服务极大地提升了Linux系统的安全性&#xff0c;将用户权限牢牢地锁在笼子里。semanage命令可以设置文件、目录的策略&#xff0c;还可以管理网络端口、消息接口。 常用参数&#xf…

vue3+vite配置 unplugin-vue-component 找不到 Vant 组件的问题

使用 vue3 vite Vant 搭建移动端项目&#xff0c;为了避免全量引入 vant 导致打包体积过大&#xff0c;又不想一个一个组件手动导入&#xff0c;所以就选择了 vant 官方推荐的方法&#xff0c;使用 unplugin-vue-components 插件自动引入组件&#xff0c;并按需引入组件的样式…

Qgis3.16ltr+VS2017二次开发环境搭建(保姆级教程)

1.二次开发环境搭建 下载osgeo4w-setup.exeDownload QGIShttps://www.qgis.org/en/site/forusers/download.html 点击OSGeo4W Network Installer 点击下载 OSGeo4W Installer 运行程序 osgeo4w-setup.exe&#xff0c;出现以下界面&#xff0c;点击下一页。 选中install from i…

力扣206. 反转链表

给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1]示例 3&#xff1a; 输入&am…

MySQL进阶

目录 一、存储引擎 1、MySQL体系结构 2、存储引擎简介 3、存储引擎特点 InnoDB MyISAM Memory 4、存储引擎选择 二、索引 1、索引概述 2、索引结构 3、索引分类 4、索引语法 5、SQL性能分析 5.1 SQL执行频率 5.2 慢查询日志 5.3 profile详情 5.4 explain执行…

Sentinel流量规则模块(新增)

系统并发能力有限&#xff0c;比如系统A的QPS支持1个请求&#xff0c;如果太多请求过来&#xff0c;那么系统A就应该进行流量控制了&#xff0c;比如其他请求直接拒绝 新增流控规则介绍:新增流控规则窗口 1.资源名&#xff1a;默认请求路径。 2.针对来源&#xff1a;Se…

基于51单片机和proteus的温室大棚系统

此系统是基于51单片机和proteus的仿真设计&#xff0c;功能如下&#xff1a; 1. LCD1602实时显示光照/土壤湿度/温度值及设定值。 2. 按键可增减光照/土壤湿度/温度设定阈值。 3. 获取到的温度低于设定温度则打开加热设备。 4. 获取到的光照值低于设定光照值则打开补光灯。…

【iOS】编译与链接

前言 计算机语言分为机器语言、汇编语言和高级语言。 可以将高级语言分为两种&#xff1a;编译语言和解释型语言&#xff08;直译式语言&#xff09;。 解释型语言&#xff08;逐步进行解释执行&#xff09; 解释语言编写的程序在每次运行时都需要通过解释器对程序进行动态…

【区块链+体育】“数智化”的杭州亚运会,中创助力区块链技术发展

“智能”&#xff0c;是杭州亚运会的办赛理念之一。除了数字藏品开亚运先河&#xff0c;杭州亚组委充分应用区块链、大数据、人工智能等前沿技术&#xff0c;为观众提供从购票、出行、观赛到住宿、美食和旅游等“一站式”服务。 本次亚运会将全程智能陆续落到了实处&#xff0…

CSS 实现 Turbo 官网 3D 网格线背景动画

转载请注明出处&#xff0c;点击此处 查看更多精彩内容 查看 Turbo 官网 时发现它的背景动画挺有意思&#xff0c;就自己动手实现了一下。下面对关键点进行解释说明&#xff0c;查看完整代码及预览效果请 点击这里。 简单说明原理&#xff1a;使用 mask-image 遮罩绘制网格&a…

Python测试框架Pytest的基础入门

Pytest简介 Pytest is a mature full-featured Python testing tool that helps you write better programs.The pytest framework makes it easy to write small tests, yet scales to support complex functional testing for applications and libraries. 通过官方网站介绍…

ios 通过xib自定义控件

通过xib自定义控件 xib和stroyboayd对比 共同点&#xff1a; 都是用来描述软件界面 都是用interface Builder工具来编辑 本质都是转换成代码去创建控件 不同点&#xff1a; xib是轻量级的&#xff0c;用来描述局部ui界面 创建模型文件 XMGCar 自定义控件 xib 图形设计 …

graylog源码搭建

这里主要讲如何源码安装graylog 下载地址&#xff1a; https://www.graylog.org/downloads/ 下载带有JVM的源码文件源码安装 下载graylog-5.1.3-linux-x64.tgz&#xff0c;并上传到Centos中&#xff0c;执行以下操作 tar -zxvf graylog-5.1.3-linux-x64.tgzcd /etcmkdir -p …

每天一道C语言编程:Cylinder(圆柱体问题)

题目描述 使用一张纸和剪刀&#xff0c;您可以通过以下方式切出两个面形成一个圆柱体&#xff1a; 水平切割纸张&#xff08;平行于较短的边&#xff09;以获得两个矩形部分。 从第一部分开始&#xff0c;切出一个最大半径的圆。圆圈将形成圆柱体的底部。 将第二部分向上滚动&…