用例图在线制作网站鄂尔多斯教育网站入口

在vue2中实现打印功能
第一步安装vue-print-nb

npm install vue-print-nb

第二步在mian.js文件中引入

import Print from 'vue-print-nb'
App.use(Print)

第三步在代码中使用

<template><div><!-- 直接绑定的printobj 可以处理取消打印和完成打印等一系列操作，详情可以去git看源码 --><el-button v-print="printobj">打印</el-button><!-- 直接绑定id，确保id名一致 --><el-button v-print="{ id: 'printMe', popTitle: '标题' }">打印</el-button><div id="printMe"><div style="width: 1px; height: 1px"></div><p>打印的内容</p></div></div>
</template>
<script>
export default {data() {return {printobj: {id: "printMe",popTitle: "标题",closeCallback: this.closeCallback,},};},methods: {closeCallback(vue) {console.log(123); //取消打印的事件},},
};
</script>
<style lang="scss" scoped>
@media print {@page {size: auto;// margin: 3mm;  去掉标题和水印}
}
</style>

遇到的问题记录
1.打印的页数不对，例如我想测试打印，给内容添加了一行文字，点击打印结果打印的页数是两张，有一张空白页，按照网上说的给外层设置样式可以解决，但是我这边使用的实际情况还是不行，后面发现在里面加一个有宽高的内容页数就会根据实际情况来，例如我在id="printMe"的内容里面加了一个<div style="width: 1px; height: 1px"></div>就不会有多余的空白页
2.如果是按钮直接绑定了id，想给打印的内容添加标题<el-button type="primary" v-print="{id:'printMe',popTitle:'标题'}" >打印</el-button >