vue 实现打印与批量分页打印功能

安装 npm install print-js --save

main.js 引入

import Print from 'vue-print-nb'Vue.use(Print) // 注册

3.打印效果

代码如下 :

<template><div class="box"><div id="printTest">//打印内容<div class="box_printTest"><div class="box_title">xxxxxxxxx清单</div><div><table><tr><td>序号</td><td>类别</td><td>保管权限</td><td>年度</td><td>档案号起止</td><td colspan="4">数量</td><td>备注</td></tr><tr v-for="(ls,index) in 10" :key="index"><td>{{index+1}}</td><td>类别</td><td>保管期限</td><td>年度</td><td>档案号起止</td><td>件</td><td>卷</td><td>本</td><td>盒</td><td>备注</td></tr></table></div><div style="padding-top:10px">备注：本清单一式两份，移交部门保留一份，接收部门保留一份</div><div style="display:flex;padding-left:110px"><div class="qtwu_right"><div><span>移交部门：</span><span></span></div><div><span>移交经办人：</span><span></span></div><div><span>移交日期：</span><span></span></div></div><div class="qtwu_right" style="padding-left:50px"><div><span>接收部门：</span><span></span></div><div><span>接收经办人：</span><span></span></div><div><span>移交日期：</span><span></span></div></div></div></div></div><div>//打印内容</div><button v-print="'#printTest'">打印</button></div>
</template><script>export default {data() {return {}},};
</script><style>.box{background: white;}.box_printTest {font-size: 15px;font-family:"宋体";width: 867px;margin-left: 25px;font-size: 22px;}.box_printTest .box_title{font-size: 28px;text-align: center;font-weight: bold;padding-bottom: 20px;}.box_printTest table td {border: 1px solid #606266;padding: 8px 5px;text-align: center;}.box_printTest table {border-collapse: collapse;text-align: center;width: 867px;}.box_printTest table td:nth-child(1){width: 80px;}.box_printTest table tr:nth-child(2) td:nth-child(2){width:530px;}.box_printTest table td:nth-child(3){width:200px;}.box_printTest table td:nth-child(4){width:80px;}.box_printTest table td:nth-child(5){width:260px;}.box_printTest table td:last-child{width:90px;}.box_printTest .qtwu_right {line-height: 30px;font-size: 20px;padding-top: 15px;}.box_printTest .qtwu_right span:nth-child(1) {width: 121px;display: inline-block;}.box_printTest .qtwu_right span:nth-child(2) {display: inline-block;width: 160px;border-bottom: 1px solid #606266;}
</style>

注意: id="printTest" 与 v-print="'#printTest'"名字需要一致，不一致时控制台报错如下

4.批量分页打印效果图以A4纸为例，一份独占一张A4纸

图片较长截取一部分

代码如下 :

<template><div class="box"><div id="printTest"><div class="box_printTest" v-for="(item_cm,index_cm) in 2" :key="index_cm"style="page-break-after:always"><div class="box_title">xxxx清单</div><div><table><tr><td>序号</td><td>类别</td><td>保管权限</td><td>年度</td><td>档案号起止</td><td colspan="4">数量</td><td>备注</td></tr><tr v-for="(ls,index) in 10" :key="index"><td>{{index+1}}</td><td>类别</td><td>保管期限</td><td>年度</td><td>档案号起止</td><td>件</td><td>卷</td><td>本</td><td>盒</td><td>备注</td></tr></table></div><div style="padding-top:10px">备注：本清单一式两份，移交部门保留一份，接收部门保留一份</div><div style="display:flex;padding-left:110px"><div class="qtwu_right"><div><span>移交部门：</span><span></span></div><div><span>移交经办人：</span><span></span></div><div><span>移交日期：</span><span></span></div></div><div class="qtwu_right" style="padding-left:50px"><div><span>接收部门：</span><span></span></div><div><span>接收经办人：</span><span></span></div><div><span>移交日期：</span><span></span></div></div></div></div></div><div></div><button v-print="'#printTest'">打印</button></div>
</template><script>export default {data() {return {}},};
</script><style>.box{background: white;height: 800px;overflow-y: auto;}.box_printTest {font-size: 15px;font-family:"宋体";width: 867px;margin-left: 25px;font-size: 22px;}.box_printTest .box_title{font-size: 28px;text-align: center;font-weight: bold;padding-bottom: 20px;}.box_printTest table td {border: 1px solid #606266;padding: 8px 5px;text-align: center;}.box_printTest table {border-collapse: collapse;text-align: center;width: 867px;}.box_printTest table td:nth-child(1){width: 80px;}.box_printTest table tr:nth-child(2) td:nth-child(2){width:530px;}.box_printTest table td:nth-child(3){width:200px;}.box_printTest table td:nth-child(4){width:80px;}.box_printTest table td:nth-child(5){width:260px;}.box_printTest table td:last-child{width:90px;}.box_printTest .qtwu_right {line-height: 30px;font-size: 20px;padding-top: 15px;}.box_printTest .qtwu_right span:nth-child(1) {width: 121px;display: inline-block;}.box_printTest .qtwu_right span:nth-child(2) {display: inline-block;width: 160px;border-bottom: 1px solid #606266;}
</style>

其中style="page-break-after:always" 属性用于设置在指定元素后面插入分页符,确保每页隔开

//仅供参考,如有雷同,纯属虚构

vue 实现打印与批量分页打印功能相关推荐

html打印表格自动分页,Web分页打印细线表格+分页打印之终极攻略
Web分页打印细线表格+分页打印之终极攻略发布时间:2009-03-01 23:46:40 作者:佚名我要评论最近给客户做打印的时候,客户提出打印时不要打印该页面的头,只是打印表格里面 ...
html分页表格中的线条,HTML_Web分页打印细线表格+分页打印之终极攻略，最近给客户做打印的时候，客 - phpStudy...
Web分页打印细线表格+分页打印之终极攻略最近给客户做打印的时候,客户提出打印时不要打印该页面的头,只是打印表格里面的内容,因为头部有背景和打印按钮,而且要细线表格的那种,我想细线表格不是很简单吗 ...
vue打印问题（分页打印、批量打印条形码）
前言项目需求打印功能所遇到的问题.在此记录,望能帮到你一下问题: 当内容超过一页时不会自动分页? 当使用vue3-barcode 打印条形码时,不能批量打印? 基础打印安装官网地址:https ...
vue-print-nb 实现页面打印（含分页打印）
Web 实现页面打印安装官网地址:https://github.com/Power-kxLee/vue3-print-nb // 安装打印组件 npm install vue-print-nb ...
vue-easy-print批量分页打印
import vueEasyPrint from "vue-easy-print"; 1打印页作为子组件,要打印的数据,由父组件请求获得, 再传给子组件 ( 注意 vm 和 css ...
js前端实现批量分页打印二维码标签
目录代码展示: 1.将勾选的数据以json数组的形式传到后台 2.后端代码(java.C#) 3.最后一步就是拿着后台传过来的图片码取打印喽最近在项目中遇到在前端页面勾选数条数据一键批量打印二维码 ...
lodop实现打印，支持分页打印
1.官网下载 http://www.lodop.net/download.html 建议下载"Lodop最新综合版"和"最新技术手册" 2.安装相应的文件(in ...
android读取所有图片分页打印,js控制分页打印、打印分页示例
html和html5详解最近看群里聊天聊得最火热的莫过于手机网站和html5这两个词.可能有人会问,这两者有什么关系呢?随着这移动互联网快速发展的时代,尤其是4G时代已经来临的时刻,加上微软对&qu ...
php可以打印一个页面,利用html实现分页打印功能的实例详解
本篇介绍利用html实现分页打印功能的实例详解,有些不想打印出来的分页打印的都可以应用这类样式进行控制在非打印时是无效的. 页面打印 /* 应用这个样式的在打印时隐藏 */ .noPrint { d ...

vue 实现打印与批量分页打印功能

vue 实现打印与批量分页打印功能相关推荐

最新文章

热门文章