vue print-js 解决打印分页问题

前后尝试了两个插件 vue-print-nb、vue-easy-print ，都不行。最后选择了 print-js。

不多说了，贴整个代码

<template><div class="table-data"><div class="search-box"><el-row><el-col :span="24"><div class="grid-content bg-purple"><el-row><el-col :span="20"><div class="block"><el-date-picker size="mini" type="daterange" v-model="selectDate" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="searchPay"></el-date-picker></div></el-col><el-col :span="2"><el-button type="primary" icon="el-icon-printer" size="mini" @click="printDemo">打印</el-button></el-col></el-row></div></el-col></el-row></div><div ><el-table v-loading="loading" element-loading-text="拼命加载中" :data="tableData" border stripe style="width:100%" class="table-box-print"><el-table-column width="200" label="缴费日期" prop="payDate" align="center" sortable></el-table-column><el-table-column fit label="缴费方式" prop="payWay" align="center" sortable></el-table-column><el-table-column fit label="缴费笔数" prop="count" align="center"></el-table-column><el-table-column fit label="实缴金额" prop="courseTotal" align="center"></el-table-column></el-table><el-divider></el-divider><el-row><el-col :span="2" :offset="10"><el-tag size="mini">缴费数：</el-tag></el-col><el-col :span="5"><el-input size="mini" v-model="count" :disabled="true"></el-input></el-col><el-col :span="2"><el-tag size="mini">缴费总额：</el-tag></el-col><el-col :span="5"><el-input size="mini" v-model="totalFee" :disabled="true"></el-input></el-col></el-row></div></div></template><script lang="ts">import {Component,Vue,Provide} from "vue-property-decorator";import {State,Getter,Mutation,Action} from "vuex-class";import print from 'print-js';@Component({components: {print}})export default class PayRecordPrintByPayWay extends Vue {@Getter("user") getUser: any;@Provide() selectDate: any = "";@Provide() tHeight: number = document.body.offsetHeight - 100;@Provide() tableData: any = []; // 表格数据@Provide() printData: any = []; // 表格数据@Provide() page: number = 1; // 当前page@Provide() size: number = 50; // 请求数据的个数 默认5@Provide() total: number = 0; // 总数据条数@Provide() count: number = 0; // 总数据条数@Provide() totalFee: number = 0; // 总数据条数@Provide() loading: boolean = true;test() {console.log(this.selectDate);console.log(this.selectDate[0]);console.log(this.selectDate[1]);this.searchPay();}created() {this.loading = false;}handleSizeChange(val: number): void {this.size = val;this.page = 1;//this.searchVal ? this.loadSearchData() : this.loadData();}handleCurrentChange(val: number): void {this.page = val;//this.searchVal ? this.loadSearchData() : this.loadData();}/**查询缴费记录*/searchPay() {if (this.selectDate.length < 2) {return;}let data: any = {beginDate: this.selectDate[0],endDate: this.selectDate[1],};(this as any).$axios.post("/student/searchPayRecordWithPayWay", data).then((res: any) => {if (res.data.state == "error") {this.$message({message: res.data.msg,type: res.data.state,duration: 3000});}this.tableData = res.data.list;this.printData = res.data.list;this.total = res.data.total;if (this.total > 0) {for (let i = 0; i < this.total; i++) {this.totalFee = this.totalFee + Number(this.tableData[i].courseTotal);this.count = this.count+ Number(this.tableData[i].count);}}this.printData.push({payWay: '合计',count: this.count ,courseTotal:this.totalFee,payDate:"------"})this.loading = false;});}printDemo() {print({printable: this.printData,//table header//field someJSONdata对应的字段 displayName 打印表格显示的字段properties: [{field: 'payDate',displayName: '缴费日期',columnSize: 1},{field: 'payWay',displayName: '缴费方式',columnSize: 1},{field: 'count',displayName: '缴费笔数',columnSize: 1}, {field: 'courseTotal',displayName: '实缴金额',columnSize: 1}],// 头部样式// gridHeaderStyle: "border: 1px solid lightgray;white-space:nowrap; ",// //表格样式// gridStyle: "border: 1px solid lightgray;white-space:nowrap; ",gridHeaderStyle: 'color: red; border: 1px solid #3971A5;',gridStyle: 'border: 1px solid #3971A5; text-align:center; font-size: 8px;',header: '<h3 class="custom-h3">缴费方式统计表</h3>',// scanStyles: false,// style: style,//打印类型type: "json"});}}</script><style lang="scss">.table-box-print {font-size: 8px;th {padding: 0 !important;height: 20px;}td {padding: 0 !important;height: 20px;}}.pages {background: #fff;margin-top: 10px;padding: 10px 10px;text-align: right;height: 50px;box-sizing: border-box;}.table-data {.el-input {width: 200px;margin-right: 10px;}.search-box {background: #fff;margin-bottom: 10px;padding: 10px 10px;border-radius: 4px;height: 50px;box-sizing: border-box;.el-input {width: 100px;margin-right: 10px;}}}</style>

vue print-js 解决打印分页问题相关推荐

vue使用print.js实现打印功能，以及添加打印机
print.js 一个javascript库,可以实现打印功能 github地址 github地址: https://github.com/crabbly/print.js 官网地址 https:// ...
vue封装打印插件print.js实现打印组件功能
代码插件地址:https://github.com/xyl66/vuePlugs_printjs 1. 打印插件属性方法定义-print.js // 打印类属性.方法定义 /* eslint-di ...
Print.js实现打印pdf，HTML，图片(可设置样式可分页)
目录一.安装及引入Print.js 二.介绍三.常用配置四.具体使用一.安装及引入Print.js 1.安装 npm install print-js --save //or yarn add ...
前端使用print.js实现打印
前言项目中经常会用到前端调用浏览器打印的功能,也经常会遇到一些问题,写这篇文章是为了更好的梳理一下相关内容.下面的内容基于vue. 如果需要用到前端生成二维码可以看我的这篇文章:在vue项目中使用q ...
vue+element-ui+js页面打印（打印elementui的table）
前端调用浏览器打印功能,实现纯前端vue+element-ui+js打印页面功能 1.效果展示 2.封装成公共函数 3.在.vue文件中引入并使用"printExcel"函数 1. ...
vue项目使用Print.js插件实现PDF文件打印
一,Print.js介绍 Print.js主要是为了帮助我们在应用程序中直接打印PDF文件,而不需要离开界面,也不需要使用嵌入.对于用户不需要打开或下载PDF文件的特殊情况,只需要打印即可. 例如,当 ...
vue使用print.js打印插件
任务:解决vue页面局部打印功能 print.js插件,可以打印 html.pdf.json数据官网:https://printjs.crabbly.com/ 一个整理的很好的讲解:https:// ...
vue @media print使用js插入打印页不同尺寸打印，可自定义尺寸大小，打印机配置
业务需求在开发时,遇到需求打印时既能切换A4纸张,又能切换成凭证纸张.而使用 @media 设置尺寸后,影响所有页面,无法实现打印多尺寸的问题. 打印技术使用浏览器自带的 print 打印技术打 ...
jquery打印html页面自动分页,前端实现指定位置分页、多页打印功能（jquery.print.js）...
1. 分类原生打印,window.print() 实现插件实现,很多种,我这里选择的是 jquery.print.js 优缺点原生打印的好处就不多说了,简单方便,全屏打印,如果对打印功能没有什么 ...

vue print-js 解决打印分页问题

vue print-js 解决打印分页问题相关推荐

最新文章

热门文章

vue print-js 解决 打印分页问题

vue print-js 解决 打印分页问题相关推荐

最新文章

热门文章

vue print-js 解决打印分页问题

vue print-js 解决打印分页问题相关推荐