Vue开发 使用vue-print-nb插件实现页面打印功能

vue-print-nb插件的安装

打开项目终端，运行如下代码进行插件的安装

$ npm i vue-print-nb

vue-print-nb插件的使用

首先在文件中引入，注册该插件。注：可以在main.js中注册，也可以单独封装一个负责所有的全局自定义组件的文件

//main.js 中使用
import Print from 'vue-print-nb' //引入插件
Vue.use(Print) // 注册打印组件

或在scr/components/index.js进行注册

// scr/components/index.js中使用
import Print from 'vue-print-nb' // 导入打印插件
export default {
  install (Vue) {
    // 完成组件的注册
    Vue.use(Print) // 注册打印组件
  }
}

完成注册后在需要使用的位置，使用 v-print指令完成页面的打印 如下代码

<template>
 <div id="myPrint">
  // 使用flex布局
  <el-row type="flex" justify="end">
    // v-print指令是打印谁？后面需要跟上一个对象 
   // 这时在data中定义一个对象printObj 
   <el-button v-print="printObj" size="small" type="primary">打印</el-button>
  </el-row>
// 放置表格的布局  在此省略....
 </div>
</template>

<script>
    data () {
    return {
      printObj: {
      //这里的id参数是 需要打印的页面父元素的id
        id: 'myPrint'
      }
  }
 </script>

完成的页面布局

此时点击打印按钮就可以完成调用，实现页面的打印功能，该打印只会打印如图<div id="myPrint"></div>里设计的布局内容 如下图所示

总结：vue-print-nb插件使用起来也是相当简单，大致分为两步，1、下载插件，2、引入插件和注册实例化插件， 3、在标签中使用 v-print 指令