vue打印功能详解
安装Print包
npm install vue-print-nb --save
main.js全局注册
import Print from 'vue-print-nb'
Vue.use(Print);
使用
用v-print指定需要打印的div容器，本次叫printTest。
最好使用行内样式，使用组件库部分样式可能不能生成。
<div id="printTest" >
<p>锄禾日当午</p>
<p>汗滴禾下土 </p>
<p>谁知盘中餐</p>
<p>粒粒皆辛苦</p>
</div>
<button v-print="'#printTest'">打印</button>
我的项目代码（ant design of vue组件）
<a-modal :title="`巡检单打印预览：${pollingListNO}`"
v-model="show"
:maskClosable="false"
width="80%"
:bodyStyle="bodyStyle"
@cancel="handleCancel">
<!-- <a-button key="back"
@click="handleCancel">取消</a-button>
<a-button key="submit"
type="primary"
style="margin-left: 16px"
:loading="submitLoading"
@click="handleConfirm">打印</a-button>
<a-divider /> -->
<template v-if="!loading">
<div id="printWrap"
title="测试">
<h6 style="font-size:24px;text-align: center;line-height:40px;">设备巡检单</h6>
<div style="height:80px;">
<div style="float:left;width:50%;"><span style="display:inline-block;width:100px">巡检单号：</span><span>{{ myInfo.pollingListNo||"无" }}</span></div>
<div style="float:left;width:50%;"><span style="display:inline-block;width:100px">派发时间：</span><span>{{ myInfo.distributionTime||"无" }}</span></div>
<div style="float:left;width:50%;"><span style="display:inline-block;width:100px">派发人：</span><span>{{ myInfo.distributionUserName||"无" }}</span></div>
<div style="float:left;width:50%;"><span style="display:inline-block;width:100px">完成期限：</span><span>{{ myInfo.pollingDeadline||"无" }}</span></div>
<div style="float:left;width:50%;"><span style="display:inline-block;width:100px">巡检人：</span><span>{{ myInfo.pollingUserName||"无" }}</span></div>
<div style="float:left;width:50%;"><span style="display:inline-block;width:100px">打印时间：</span><span>{{ printTime }}</span></div>
</div>
<!-- <a-table rowKey="id"
size="middle"
:bordered="true"
:columns="TableColumns"
:dataSource="myInfo.myCheckEquip"
:pagination="false"
:loading="loading">
<template slot="deailResponse"
slot-scope="deailResponse, record">
<span>{{ deailResponse.map((item,index)=>{return index+1+"："+item.pollingItemName}).join("；") }}</span>
</template>
<template slot="deailResponse"
slot-scope="deailResponse, record">
<span>{{ deailResponse.map((item,index)=>{return index+1+"："+item.pollingItemFunction}).join("；") }}</span>
</template>
</a-table> -->
<table style="width:100%;">
<thead>
<tr>
<th style="text-align:left;border:1px solid black;width:2%;">序号</th>
<th style="text-align:left;border:1px solid black;width:8%;">存放地点</th>
<th style="text-align:left;border:1px solid black;width:10%;">设备名称</th>
<th style="text-align:left;border:1px solid black;width:10%;">设备资产编号</th>
<th style="text-align:left;border:1px solid black;width:25%;">项目</th>
<th style="text-align:left;border:1px solid black;width:25%;">方法</th>
<th style="text-align:left;border:1px solid black;width:10%;">结果</th>
<th style="text-align:left;border:1px solid black;width:10%;">备注</th>
</tr>
</thead>
<tbody>
<template v-if="myInfo.myCheckEquip&&myInfo.myCheckEquip.length">
<tr v-for="(item,index) in myInfo.myCheckEquip"
:key="index">
<td style="text-align:left;border:1px solid black;width:4%;">{{ index+1 }}</td>
<td style="text-align:left;border:1px solid black;width:6%;">{{ item.location }}</td>
<td style="text-align:left;border:1px solid black;width:10%;">{{ item.equipmentName }}</td>
<td style="text-align:left;border:1px solid black;width:10%;">{{ item.equipmentAssetsNo }}</td>
<!-- <td style="text-align:left;border:1px solid black;width:25%;">{{ item.deailResponse&&item.deailResponse.length?item.deailResponse.map((deail,j)=>{return j+1+"："+deail.pollingItemName}).join("；"):"无" }}</td> -->
<td style="text-align:left;border:1px solid black;width:25%;">
<template v-if="item.deailResponse&&item.deailResponse.length">
<span style="display: block;"
v-for="(detail,j) in item.deailResponse">{{ j+1+"、"+detail.pollingItemName+"；" }}</span>
</template>
<template v-else>无</template>
</td>
<!-- <td style="text-align:left;border:1px solid black;width:25%;">{{ item.deailResponse&&item.deailResponse.length?item.deailResponse.map((deail,j)=>{return j+1+"："+deail.pollingItemFunction}).join("；"):"无" }}</td> -->
<td style="text-align:left;border:1px solid black;width:25%;">
<template v-if="item.deailResponse&&item.deailResponse.length">
<span style="display: block;"
v-for="(detail,j) in item.deailResponse">{{ j+1+"、"+detail.pollingItemFunction+"；" }}</span>
</template>
<template v-else>无</template>
</td>
<td style="text-align:left;border:1px solid black;width:10%;"></td>
<td style="text-align:left;border:1px solid black;width:10%;"></td>
</tr>
</template>
</tbody>
</table>
</div>
</template>
<template v-else>
<div class="spin-wrap">
<a-spin size="large" />
</div>
</template>
<template slot="footer">
<a-button key="back"
@click="handleCancel">取消</a-button>
<a-button key="submit"
type="primary"
v-print="'#printWrap'">打印</a-button>
</template>
</a-modal>
</template>
<script>
import moment from 'moment'
import { TableColumns } from './index'
import { printInfo } from '@/api/equipment/polling/myNowTask'
import { Empty } from 'ant-design-vue'
export default {
props: ['visible', 'pollingListSn', 'pollingListNO', 'userSn'],
data () {
return {
bodyStyle: {
'max-height': '600px',
'overflow': 'auto'
},
printTime: null,
loading: false,
TableColumns,
myInfo: {
myCheckEquip: []
}
}
},
computed: {
show: {
get: function () {
return this.visible
},
set: function () { }
}
},
watch: {
visible (newVal, oldVal) {
if (newVal) {
if (this.pollingListSn) {
this.getInfo()
this.printTime = moment().format('YYYY-MM-DD HH:mm:ss')
}
}
}
},
beforeCreate () {
this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
},
methods: {
getInfo () {
this.loading = true
const { pollingListSn, userSn } = this
printInfo({ pollingListSn, userSn }).then(res => {
console.log('printInfo', res)
this.myInfo = res
}).finally(() => {
this.loading = false
})
},
handleCancel () {
this.$emit('close')
}
}
}
</script>
<style lang="less" scoped>
.spin-wrap {
text-align: center;
border-radius: 4px;
margin-bottom: 20px;
padding: 30px 50px;
margin: 20px 0;
}
</style>
