使用 vue-print-nb 打印table,数据是后端接口返回的动态数据,
当时数据很多时,打印预览的表格还是只有一页,如下图:
数据太多,中间省略未截图。
打印预览如下,只有一页:
代码:(这里的table
代码示例与我另一篇文章中的是一样的,此处不再详细贴了,大家点过去看吧:table)
<div style="text-align:center" id="printContent">
<table class="table">
<thead>
<tr>
<th rowspan="2">序号</th>
<th rowspan="2">姓名</th>
<th rowspan="2">学号</th>
<th rowspan="2">性别</th>
<th rowspan="2">班级</th>
<th colspan="5" v-for="(it,i) in examDates" :key="i">{{it}}</th>
</tr>
<tr>
<template v-for="itd in examDates">
<th v-for="(itc,j) in th_courseNames" :key="itd+j">{{itc}}</th>
</template>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in studentDataList" :key="index">
<td>{{index+1}}</td>
<td>{{item.studentName}}</td>
<td>{{item.studentCode}}</td>
<td>{{item.sex.name}}</td>
<td>{{item.className}}</td>
<template v-for="examDate in examDates">
<template v-for="(course,j) in th_courseNames">
<td :key="examDate+j">
{{initScoreFinal(examDate,course,item.map)}}
</td>
</template>
</template>
</tr>
</tbody>
</table>
</div>
使用的iviewui
的按钮:
<Button style="margin-left:5px;" type="primary" v-print="'#printContent'">打印</Button>
根据vue-print-nb 的示例,并没有其他的设置了,
那为什么当时数据很多时,打印预览的表格还是只有一页?
该如何设设置?
看到vue实现打印功能的两种方法说显示不全的设置缩放,但是那么多条数据缩放到一页显示也太小了吧,能自动换页不?哎,换用他说的第二种方法vuePlugs_printjs vue打印插件,试了,依然是只显示一页内容-_-||
改为使用 Print.js
完美解决