安装配置

npm install vue-print-nb --save

main.js中

//  导入打印插件
import Print from 'vue-print-nb'
Vue.use(Print);

.vue页面中使用

<div id="printPage">
    打印内容
</div>

<el-button type="primary" v-print="'printConfig'">打印</el-button>

data中定义变量

printConfig:{
    id:'printPage', //被打印部分的id
    popTitle:'打印后，页眉居中的标题'
},

必要的样式

<!--打印时添加的样式-->
<style scoped media="print">
    /*指定打印的分页*/
   /deep/ section{
       page-break-after:always;
   }

   /*避免出现空白尾页*/
   html,body,#app{
       height: 98% !important;
       margin: 0px;
       padding: 0px;
   }

指定分页

在要进行分页的标签上，添加以下样式即可

page-break-after:always;

例如，给section标签添加此样式，然后使用section标签实现分页

section{
    page-break-after: always;
}
<div id="printPage">
    <section>
        第一页的内容
    </section>
    <section>
        第二页的内容
    </section>
    <section>
        第三页的内容
    </section>
</div>

<el-button type="primary" v-print="'printConfig'">打印</el-button>

移除末尾的空白页

若打印时，末尾总是出现空白页，则存在定义了height:100%的元素，删除掉此样式即可
通常都是因为存在以下样式导致,通常被定义在全局样式文件中，或index.html中

html,body,#app{
    height: 100%;
}

若有的页面需要此样式，则在对应页面单独添加