实现效果
1，npm 安装 vue-print-nb 插件
cnpm i vue-print-nb
2，安装完成之后在 main.js 中引入并注册
import Print from 'vue-print-nb'; //引入
Vue.use(Print); //注册
3，在组件中使用
示例
注意：一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id
<!--//需要打印的页面-->
<div id="printMe" ref="printContent">
<div class="hammer">
<h3>黄山市机动车排放维修治理（M）站竣工出厂合格证</h3>
</div>
<!-- //内容 -->
<div class="trail">
<p>该车经我站治理维护，准予出厂。</p>
</div>
</div>
<!--//通过按钮来调用-->
<el-button type="primary" @click="dialogVisible" v-print="printObj">打印</el-button>
data
printObj: {
id: 'printMe',//id
popTitle: "标题",//自定义设置标题
},
vue-print-nb插件的一些优化
1.去掉页眉页脚
<style>
@page {
size: auto;
margin: 0mm;
}
</style>
2.打印內容不自动换行问题
只需要给不自动换行的标签加上 word-wrap:break-word; 即可。
<style>
.procedure{
word-wrap:break-word;
}
</style>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/79433.html
