前端实现页面打印功能，我选择比较流行的插件 vue-print-nb

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情

$ npm  i  vue-print-nb

它的用法是

首先注册该插件

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

给要打印的盒子指定 id

<div id="printbox">

使用v-print指令的方式进行打印

<div style="text-align: right; margin-top: 10px;">
  <el-button v-print="{ id: 'printbox' }" type="primary" size="small">打印</el-button>
</div>

接下来看效果吧

哈哈，可能有些小伙伴很懵，接下来就是参数的解释啦

参数说明
参数是百度查找的，有兴趣可以去官网看看

注意点

• Callback函数中this指向当前print object对象，that返回Vue对象；
• 不需要页眉页脚可以在打印弹窗页面的更多设置里面取消选择；
• 不设置popTitle参数页眉标题为undifined；
• popTitle参数为空时，页眉标题默认为Document Title。