使用方法
1,引入PrintPage组件,在content插槽里面写要打印的内容;
2,调用this.$refs.printPage.init()准备打印;
3,调用this.$refs.printPage.doPrint()开始打印;
printPage.vue
<template>
<div class="PrintPage" id="printable" v-show="isShow">
<slot name="content"></slot>
</div>
</template>
<script>
import print from 'print-js'
export default {
components: {
print
},
data() {
return {
/**
* 页面相关
*/
isShow: false, //控制打印区域是否显示
header: null
}
},
methods: {
/**
* 初始化
*/
init(header) {
console.log('PrintPage-init')
this.isShow = true
this.header = header
},
/**
* 打印
*/
doPrint() {
this.$nextTick(() => {
this._print()
})
},
_print() {
console.log('PrintPage-_print')
// 调用打印方法
print({
printable: 'printable',
header: this.header,
type: 'html',
// 原页面样式
scanStyles: true,
targetStyles: [