自定义打印区域:
利用***page-break-after:always;***进行分页
<div ref="print" v-if="isShowMask">
<!-- 打印多个学校 -->
<div v-for="(item,index) in printSchoolList" :key="index" v-if="!isSingle">
<!-- 班级数量大于45 -->
<div style="page-break-after:always;width:1000px;height:600px;" v-for="(item2,index2) in [1,2,3,4]" v-if="item.scanCount > 60">
<div class="school-title">
<span style="display: block;margin-left:150px;">学</span>
<span style="display: block;margin-right:150px;">校</span>
</div>
<div class="print-font" style="" :class="item.schoolName.length > 5 ? (item.schoolName.length > 10 ? 'font102': 'font100') : (item.schoolName.length == 5 ? 'font101': '')">
{{item.schoolName}}
</div>
</div>
<!-- 班级数量小于等于45 -->
<div style="page-break-after:always;width:1000px;height:600px;" v-for="(item2,index2) in [1,2]" v-if="item.scanCount <= 60">
<div class="school-title">
<span style="display: block;margin-left:150px;">学</span>
<span style="display: block;margin-right:150px;">校</span>
</div>
<div class="print-font" style="" :class="item.schoolName.length > 5 ? (item.schoolName.length > 10 ? 'font102': 'font100') : (item.schoolName.length == 5 ? 'font101': '')">
{{item.schoolName}}
</div>
</div>
</div>
<!-- 打印单个学校 -->
<!-- 班级数量大于45 -->
<div style="page-break-after:always;width:1000px;height:600px;" v-if="isSingle&&printItem.scanCount > 60" v-for="(item2,index2) in [1,2,3,4]">
<div class="school-title">
<span style="display: block;margin-left:150px;">学</span>
<span style="display: block;margin-right:150px;">校</span>
</div>
<div class="print-font" :class="printItem.schoolName.length > 5 ? (printItem.schoolName.length > 10 ? 'font102': 'font100') : (printItem.schoolName.length == 5 ? 'font101': '')">
{{printItem.schoolName}}
</div>
</div>
<!-- 班级数量小于等于45 -->
<div style="page-break-after:always;width:1000px;height:600px;" v-if="isSingle&&printItem.scanCount <= 60" v-for="(item2,index2) in [1,2]">
<div class="school-title">
<span style="display: block;margin-left:150px;">学</span>
<span style="display: block;margin-right:150px;">校</span>
</div>
<div class="print-font" :class="printItem.schoolName.length > 5 ? (printItem.schoolName.length > 10 ? 'font102': 'font100') : (printItem.schoolName.length == 5 ? 'font101': '')">
{{printItem.schoolName}}
</div>
</div>
</div>
打印方法:
print(item,flag){
this.isSingle = flag
if (!flag) {
this.printSchoolList = item.paperOrderList
}else {
this.printItem = item
}
this.isShowMask = true
var body = window.document.body.innerHTML;
// console.log(body)
this.$nextTick(() => {
window.document.body.innerHTML = this.$refs.print.innerHTML
let timer = setTimeout(() => {
window.print();
window.document.body.innerHTML = body;
this.isShowMask = false
location.reload();
clearTimeout(timer)
},500)
})
},