vue打印数据，可分页打印

使用的是vue-easy-print 打印插件
可以支持分页打印。
转载https://download.csdn.net/download/qq_36845014/10807027?utm_source=bbsseo

在开发是想要打印功能但是打印数据不想显示出来在打印的时候要打印初数据

第一步引入vue-easy-print
npm install vue-easy-print
第二部在页面以引入组件方式引入文件

 <el-button type="primary" style="float:right" size="mini" @click="sortingListPrint">打印交接单</el-button>// sortingListPrint调用接口获取打印数据<div><vue-easy-print tableShow ref="easyPrint" ><div id="printTable"><demo :tableData="dialogData"  @clickPrint="clickPrint"></demo></div></vue-easy-print></div>import vueEasyPrint from "vue-easy-print";
import demo from "./demo";components:{vueEasyPrint,demo},
clickPrint(){let vm = thisvm.$nextTick(function(){vm.$refs.easyPrint.print();})},

dialogData是表格打印的数据，clickPrint是我组件间通信方法

因为需要不显示数据就要实现打印所以使用css来控制

<style>#printTable{display:none}@media print {#printTable{display:block;}}
</style>

顺序不可颠倒 @media print媒体查询打印的时候显示数据
因为页面渲染问题需要渲染完毕才能执行print打印所以使用watch加nextTick方式实现
demo组件中
监控列表展示数据渲染完毕执行下一步

watch:{tableData: function(){this.$nextTick(function(){console.log(this.tableData)this.$emit('clickPrint')})}},

再次特别感谢 qq_36845014 所有实现方式都是在此基础上的再次开发
demo.vue

<template><div><div v-for="page in pages" :key="page"><!-- 分页 --><div class='tab_company_out'><h2>外送清单</h2><table cellpadding='0' cellspacing='0'><tr><th width='10%'>条码</th><th width='10%'>送检单位</th><th width='10%'>外送单位</th><th width='20%'>项目</th><th width='6%'>姓名</th><th width='6%'>性别</th><th width='6%'>年龄</th><th width='12%'>预计出报告时间</th><th width='6%'>分拣人</th><th width='12%'>分拣时间</th></tr><!-- 每页显示onePageRow条数据 --><tr v-for="(row,index) in tableData.slice((page-1)*onePageRow,page*onePageRow)" :key="index"><!-- <td>{{(page-1)*onePageRow + index + 1}}</td> --><td>{{row.barcode}}</td><td>{{row.sampleSourceName}}</td><td>{{row.unitName}}</td><td>{{row.sfStr}}</td><td>{{row.name}}</td><td>{{row.sex}}</td><td>{{row.age}}</td><td>{{row.maxReportDate}}</td><td>{{row.sortName}}</td><td>{{row.sortTime}}</td></tr><!-- 插入空白行 --><template v-if="blankLines===true && tableData.slice((page-1)*onePageRow,page*onePageRow).length<onePageRow"><tr v-for="d in (onePageRow-tableData.slice((page-1)*onePageRow,page*onePageRow).length)" :key="`_${d}_`"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></template></table><ul class='lu'><li>签字：</li><li>日期：</li></ul></div></div></div>
</template><script>
export default {name: "demo",// 制作打印模版组件时，props区域尽量保留。props: {// 接受的打印数据tableData: {},// 每页多少行onePageRow: {type: Number,default: 15},// 是否插入空白行blankLines: {type: Boolean,default: true},getChineseNumber: Function // 求数字的中文写法，从easyPrint组件传入},data() {return {};},watch:{tableData: function(){this.$nextTick(function(){this.$emit('clickPrint')})}},computed: {pages() {// 求当前数据能打印的页数var pages_ = Math.ceil(this.tableData.length / this.onePageRow); // 向上取整数return pages_ <= 0 ? 1 : pages_;// return 1;},chineseTotal() {// 计算中文合计，如果忘记传入return this.getChineseNumber != null? this.getChineseNumber(this.tableData.total_amount): "您还没有传入getChineseNumber";}},methods: {test() {}}
};
</script><style scoped>
* {padding: 0;margin: 0;list-style-type: none;font-family: "微软雅黑";font-size: 12px;
}.tab_company_out {text-align: center;width: 100%;margin: auto;page-break-after: always;margin-bottom: 20px
}h2 {padding: 20px;font-size: 18px
}.dan {text-align: center;position: relative;
}.dan span {position: absolute;right: 0;
}p {overflow: hidden;padding: 10px 0;
}p span {float: left;
}p span ins {text-decoration: underline;
}p time {float: right;
}table {width: 100%;border: none;border-bottom: 1px solid #000;
}table tr td {border: 1px solid #000;border-bottom: none;border-right: none;height: 20px;line-height: 20px;text-align: center
}table tr td:last-of-type,
table tr th:last-of-type {border-right: 1px solid #000;
}table tr th {border-top: 1px solid #000;border-left: 1px solid #000;height: 22px;line-height: 22px;font-size: 12px;text-align: center
}table tr th:nth-child(2) {width: 0;
}.lu {display: inline-block;padding-top: 10px;display: flex;justify-content: space-around;
}.lu li {float: left;text-align: left;margin-right: 15px;
}.lu li label {width: 100px;display: inline-block;
}.lu li:last-of-type {margin-right: 0;
}
</style>

vue打印数据，可分页打印相关推荐

html打印表格自动分页,Web分页打印细线表格+分页打印之终极攻略
Web分页打印细线表格+分页打印之终极攻略发布时间:2009-03-01 23:46:40 作者:佚名我要评论最近给客户做打印的时候,客户提出打印时不要打印该页面的头,只是打印表格里面 ...
html分页表格中的线条,HTML_Web分页打印细线表格+分页打印之终极攻略，最近给客户做打印的时候，客 - phpStudy...
Web分页打印细线表格+分页打印之终极攻略最近给客户做打印的时候,客户提出打印时不要打印该页面的头,只是打印表格里面的内容,因为头部有背景和打印按钮,而且要细线表格的那种,我想细线表格不是很简单吗 ...
vue 实现打印与批量分页打印功能
安装 npm install print-js --save main.js 引入 import Print from 'vue-print-nb'Vue.use(Print) // 注册 3.打印效 ...
vue打印问题（分页打印、批量打印条形码）
前言项目需求打印功能所遇到的问题.在此记录,望能帮到你一下问题: 当内容超过一页时不会自动分页? 当使用vue3-barcode 打印条形码时,不能批量打印? 基础打印安装官网地址:https ...
vue-print-nb 实现页面打印（含分页打印）
Web 实现页面打印安装官网地址:https://github.com/Power-kxLee/vue3-print-nb // 安装打印组件 npm install vue-print-nb ...
ajax 不能打印出来数据,console打印数据，发现打印结果并非初始ajax返回的值
1.问题描述代码调试,在ajax一返回立马打印,发现结果竟然是后续处理过后的 2.伪代码复现 var array = [1,2]; var obj = { a: 1, b: [1,2] } cons ...
lodop实现打印，支持分页打印
1.官网下载 http://www.lodop.net/download.html 建议下载"Lodop最新综合版"和"最新技术手册" 2.安装相应的文件(in ...
android读取所有图片分页打印,js控制分页打印、打印分页示例
html和html5详解最近看群里聊天聊得最火热的莫过于手机网站和html5这两个词.可能有人会问,这两者有什么关系呢?随着这移动互联网快速发展的时代,尤其是4G时代已经来临的时刻,加上微软对&qu ...
使用print.js进行分页打印
如何进行表格大量数据的分页打印 print.js官网目的:实现大量数据的分页打印探究过程:几种流行的打印插件, vue-print-nb vue-easy-print 都没有实现自动分页打印功能( ...
php可以打印一个页面,利用html实现分页打印功能的实例详解
本篇介绍利用html实现分页打印功能的实例详解,有些不想打印出来的分页打印的都可以应用这类样式进行控制在非打印时是无效的. 页面打印 /* 应用这个样式的在打印时隐藏 */ .noPrint { d ...

vue打印数据，可分页打印

vue打印数据，可分页打印相关推荐

最新文章

热门文章