vue中使用window.print打印效果
项目要求
- 打印每页有10行表格，如果接口数据没有十个显示10行
效果图
- 第一页
- 第二页
子组件
<template>
<div>
<div class="print" :key="i" v-for="i in Len">
<p class="print-title">打印页面</p>
<div class="print-header">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione officiis quaerat dolorem nesciunt error et fugit fuga molestias quas labore autem, eligendi eum rem alias quod possimus quae voluptatum? Id?
</div>
<div class="print-layout">
我是来占位置的
</div>
<ul class="print-table">
<li class="first-li">
<span>序号</span>
<span>姓名</span>
<span>性别</span>
<span>年龄</span>
<span>电话</span>
<span>住址</span>
</li>
<li class="main-li" v-for="(item,index) in 10" :key="item">
<span v-if="dataList[index+10*(i-1)]">{{item+(10*(i-1))}}</span>
<span v-else></span>
<span v-if="dataList[index+10*(i-1)]">{{dataList[index+10*(i-1)].name}}</span>
<span v-else></span>
<span v-if="dataList[index+10*(i-1)]">{{dataList[index+10*(i-1)].sex}}</span>
<span v-else></span>
<span v-if="dataList[index+10*(i-1)]">{{dataList[index+10*(i-1)].age}}</span>
<span v-else></span>
<span v-if="dataList[index+10*(i-1)]">{{dataList[index+10*(i-1)].phone}}</span>
<span v-else></span>
<span v-if="dataList[index+10*(i-1)]">{{dataList[index+10*(i-1)].address}}</span>
<span v-else></span>
</li>
</ul>
<div class="print-footer">
我是底部信息
</div>
</div>
</div>
</template>
<script>
export default {
props: ['itemList'],
data() {
return {
dataList: []
}
},
computed:{
Len(){
if(this.dataList.length<=0) {
return 1;
}
else{
return Math.ceil(this.dataList.length/10.0);
}
}
},
created() {
this.dataList = this.itemList || [];
this.dataList=[...this.dataList];
}
}
</script>
<style lang="less">
@media screen {
.print {
display: none;
}
}
@media print {
#app {
display: none;
}
.print {
display: block;
}
}
* {
margin: 0;
padding: 0;
}
ul,li {
list-style-type: none;
}
.print {
page-break-before:always;
297mm;
height: 209mm;
padding: 24px 30px 0 30px;
box-sizing: border-box;
.print-title {
font-size: 18px;
}
.print-header {
height: 146px;
padding-top: 15px;
box-sizing: border-box;
font-size: 14px;
}
.print-layout {
height: 184px;
border: 1px solid #45484d;
box-sizing: border-box;
font-size: 14px;
}
.print-table {
height: 293px;
margin-top: 5px;
border: 1px solid #303339;
box-sizing: border-box;
li {
height: 26px;
border-bottom: 1px solid #dadadc;
box-sizing: border-box;
&:last-child {
border-bottom: none;
}
span {
display: inline-block;
16%;
height: 26px;
vertical-align: top;
line-height: 26px;
text-align: center;
border-right: 1px solid #dadadc;
box-sizing: border-box;
color: #2b2e34;
font-size: 12px;
&:last-child {
border-right: none;
}
}
&.first-li {
height: 30px;
background: #bdbec0 !important;
color: #2b2e34;
span {
height:30px;
line-height: 30px;
}
}
&.main-li {
}
}
}
.print-footer {
height: 115px;
font-size: 14px;
padding-top: 10px;
box-sizing: border-box;
}
}
</style>
父组件
<template>
<div class="index">
<button @click="handleClick">点击</button>
<button @click="printClick">打印</button>
<!-- 打印页面 -->
<div v-if="printShow" >
<Print :itemList="itemAjax" ref="printDom"></Print>
</div>
</div>
</template>
<script>
import Print from '../components/print.vue';
export default {
data() {
return{
printShow: false,
itemAjax: [
{
name: '杜二',
sex: '女',
age: '17',
phone: 112365478961,
address: '浙江'
},
{
name: '张三',
sex: '男',
age: '18',
phone: 112365478966,
address: '上海'
},
{
name: '李四',
sex: '男',
age: '38',
phone: 112365478968,
address: '南京'
},
{
name: '王麻子',
sex: '男',
age: '28',
phone: 112365478969,
address: '苏州'
},
{
name: '王大',
sex: '女',
age: '18',
phone: 112365478970,
address: '杭州'
},
{
name: '杜二',
sex: '女',
age: '17',
phone: 112365478971,
address: '浙江'
},
{
name: '张三',
sex: '男',
age: '18',
phone: 112365458966,
address: '上海'
},
{
name: '李四',
sex: '男',
age: '38',
phone: 112365878968,
address: '南京'
},
{
name: '王麻子',
sex: '男',
age: '28',
phone: 112365978969,
address: '苏州'
},
{
name: '王大',
sex: '女',
age: '18',
phone: 112365108970,
address: '杭州'
},
{
name: '杜二',
sex: '女',
age: '17',
phone: 112365474971,
address: '浙江'
}
]
}
},
methods: {
handleClick() {
alert('点击事件')
},
printClick(){
this.printShow = true;
this.$nextTick(()=>{
const print = this.$refs.printDom.$el;
document.body.appendChild(print);
window.print();
this.printShow = false;
})
}
},
components: {
Print
}
}
</script>