前言
vue 作为一种流行的前端框架,其众多插件和特性为我们的开发带来了很多便利。其中,vue 实现打印功能也是一个很有实用价值的功能。在本文中,我们将用 vue 基于 vue-print-nb 插件深入探讨 vue 实现打印功能的方法和步骤。
实现效果
实现步骤
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>