vue 实现打印，提升网页的易用性和用户体验（vue-print-nb）

前言

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>