vue print.js 打印 此处打印不包含页面的页码 （打印方法二）

<template>
<div class="modalContainer printAsset" ref="modalContainer" >
<div v-for="(items ,index) in tableDataPrint " :key= index style="page-break-after: always; zoom:1" ref="showHeight" :id="`showHeight_${index}`" class="showHeight">
<table class="assetPrintTable" style="border-collapse: collapse;">
<!-- <div class="titleInfo">
<p style="width: 100%;text-align:center">{{ items.corpName }}</p>
<p>
<span>参考信息：</span>
<span>序号：</span>
<span>{{items.year}}年第{{items.period}}期</span>
</p>
<p>
<span style="font-size:28px; font-weight: blod;">记账凭证</span>
<span>日期：{{ items.singTime }}</span>
</p>
<p>
<span>业务日期：{{ items.singTime }}</span>
<span>附件数：{{ items.attCount}}</span>
<span>凭证号：{{ items.nos }} ({{index+1}} / {{index+1}})</span>
</p>
</div> -->
<thead>
<div class="current">
<tr>
<td>{{ items.corpName }}</td>
</tr>
<tr class="title">
<td >参考信息：</td>
<td align="center" colspan="4">记账凭证</td>
<td align="right" colspan="2">业务日期：{{ items.singTime }}</td>
</tr>
<tr class="title">
<td >序号：</td>
<td align="center" colspan="4">日期：{{ items.singTime }}</td>
<td align="right" colspan="2">附件数：{{ items.attCount}}</td>
</tr>
<tr class="title" >
<td>{{items.year}}年第{{items.period}}期</td>
<td align="center" colspan="4"></td>
<td align="right" colspan="2">凭证号：{{ items.voucherGroup }}-{{ items.nos }}
<span v-for ="(page,pageIndex) in items.pages">
({{page}} / {{items.pages}})
</span>
</td>
</tr>
</div>
<tr border class="headTitle">
<td width="200">摘要</td>
<td width="291">科目</td>
<td width="100">币别</td>
<td width="100">汇率</td>
<td width="115">原币金额</td>
<td width="120">借方</td>
<td width="120">贷方</td>
</tr>
</thead>
<tbody class="assetPrintTable headTitle">
<tr v-for="(item,i) in items.financeVoucherDetailPrint" :key="i" >
<td width="200">{{ item.voucherDesc }}</td>
<td width="291">{{ item.accountName }}</td>
<td width="100">{{ item.currency }}</td>
<td width="100">{{ item.toRate }}</td>
<td width="115">{{ item.oAmt }}</td>
<td width="120">{{ item.dAmt }}</td>
<td width="120">{{ item.cAmt }}</td>
</tr>
</tbody>
<tfoot class="headTitle tfoot">
<tr>
<td colspan="5">合计: {{items.sumAmount}}</td>
<td>{{items.sumDAmount}}</td>
<td>{{items.sumCAmount}}</td>
</tr>
<tr>
<td>经办：Kiki</td>
<td>审核：Hedy</td>
<td colspan="2">过账：{{items.creator}}</td>
<td colspan="2">出纳：Lena</td>
<td>制单：{{items.creator }}</td>
</tr>
</tfoot>
</table>
<!-- <div class="titleInfo">
<p style="width: 100%;text-align:center">{{ items.corpName }}</p>
<p>
<span>参考信息：</span>
<span>序号：</span>
<span>{{items.year}}年第{{items.period}}期</span>
</p>
<p>
<span style="font-size:28px; font-weight: blod;">记账凭证</span>
<span>日期：{{ items.singTime }}</span>
</p>
<p>
<span>业务日期：{{ items.singTime }}</span>
<span>附件数：{{ items.attCount}}</span>
<span>凭证号：{{ items.nos }} ({{index+1}} / {{index+1}})</span>
</p>
</div>
<el-table
:data="items.financeVoucherDetailPrint"
:header-cell-style="{'text-align':'center','borderColor':'#6a6a6a'}"
border
cell-class-name="celleStyle"
style="width: 100%;text-align:center;border:2px solid #000;box-sizing:border-box;border-bottom:1px solid #6a6a6a">
<el-table-column
prop="voucherDesc"
label="摘要"
width="200">
</el-table-column>
<el-table-column
prop="accountName"
label="科目"
width="291">
</el-table-column>
<el-table-column
prop="currency"
label="币别"
align="left"
width="100">
</el-table-column>
<el-table-column
prop="toRate"
label="汇率"
align="right"
width="100">
</el-table-column>
<el-table-column
prop="oAmt"
label="原币金额"
align="right"
width="115">
</el-table-column>
<el-table-column
prop="dAmt"
label="借方"
align="right"
width="120">
</el-table-column>
<el-table-column
prop="cAmt"
label="贷方"
align="right"
width="120">
</el-table-column>
</el-table>
<p class="printAccount">
<span>合计: {{items.sumAmount}}</span>
<span>{{items.sumDAmount}}</span>
<span>{{items.sumCAmount}}</span>
</p>
<p class="footerInfo">
<span>经办：Kiki</span>
<span>审核：Hedy</span>
<span>过账：{{items.creator}}</span>
<span>出纳：Lena</span>
<span>制单：{{items.creator }}</span>
</p> -->
</div>
</div>
</template>
<script>
export default {
props:
{
tableDataPrint:{
type:Array,
default:[]
}
}
,
data(){
return {
currentPage:1,
}
},
created() {
},
mounted() {
},
methods:{

printInt(){
// this.tableDataPrint.forEach((item)=>{
// item.financeVoucherDetailPrint.forEach((val)=>{
// if(/\/$/.test(val.voucherDesc)){
// val.voucherDesc = val.voucherDesc.slice(0,-1);
// }
// val.voucherDesc = val.voucherDesc.replace(/\/[^\/]*$/, '');
// })
// })


this.$nextTick(()=>{
l// et showHeightList = document.querySelectorAll('.showHeight');
//let heightList = [];
// showHeightList.forEach((item,i)=>{
// if(item.clientHeight>0){
// heightList.push(item.clientHeight);
// }
// })
 // this.tableDataPrint.forEach((item,i)=>{
// heightList.forEach((data,k)=>{
// console.log(item);
// if(i == k){
// this.$set(item,"pages",Math.ceil(data/500));
// }
// })
// })
// console.log(this.tableDataPrint,"this.tableDataPrint");
// console.log(heightList,"heightList");

// let assetPrintTableLen = document.getElementById("showHeight_0").clientHeight;
// console.log(assetPrintTableLen)
setTimeout(()=>{
this.$print(this.$refs.modalContainer)
})
}
}
}
</script>
<style scoped lang="scss">
.printAccount{
border:2px solid #000;
border-top:none;
box-sizing: border-box;
padding:0;
margin:0;
height: 30px;
line-height:30px;
font-weight: bold;
font-size: 16px;
// span{
// height: 30px;
// float: left;
// width: 120px;
// display: block;
// box-sizing: border-box;

// &:nth-of-type(1){
// width: 806px;
// border-right:1px solid #6a6a6a;
// box-sizing: border-box;
// }
// &:nth-of-type(2){
// width: 120px;
// border-right:1px solid #6a6a6a;
// box-sizing: border-box;
// text-align: right;
// }

// &:nth-of-type(3){
// width: 115px;
// border:none;
// text-align: right;
// }}
}

::v-deep .celleStyle{
border-color: #6a6a6a !important;
}

.titleInfo{
p{width: 33.3%; float: left; padding: 0; margin: 0;
&:nth-of-type(3){text-align: center;}
&:nth-last-of-type(1){ text-align: right;}
span{
display: block;
}
}
}

.footerInfo{
span{width: 20%; float:left;
&:nth-last-of-type(1){text-align: right;}
}
}

tr{
width: 100%;
}

.headTitle{
td{ border:1px solid #000}
}

.tfoot{
tr{
&:nth-of-type(2){
td{ border: transparent;}
}
}
}

@media print{
// 控制页面自动分页
.page-break{
page-break-after: always;
page-break-inside: avoid;
}
.printAsset {
width: 100%;
// 表格基本样式
.assetPrintTable {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border-left: 1px solid #e4e7ed;
border-top: 1px solid #e4e7ed;
// 实现分页，行不撕裂的关键
tr {
page-break-inside: avoid;
}
// 单元格样式
}
}
footer {
display: inline-block;
}
}

</style>