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

1. 安装vue-print-nb

Vue2版本安装方法：

npm install vue-print-nb --save

Vue3版本安装方法：

npm install vue3-print-nb --save

2. 引入Vue项目

Vue2引入方式：

// 1. 全局挂载，在main.js添加
import Print from 'vue-print-nb'
Vue.use(Print)
// or
// 2. 自定义指令，在单业务页面添加
import print from 'vue-print-nb'
directives: {
  print
}

Vue3引入方式

// 1. 全局挂载
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')
// or 
// 2. 自定义指令
import print from 'vue3-print-nb'
directives: {
    print   
}

3. 参数说明

4. template示例：

<template>
  <div class="app-container">
    <!-- 按钮 -->
    <el-card>
      <el-button type="primary" @click="history">审批历史</el-button>
      <el-button v-print="'#printTest'">打印</el-button>
    </el-card>
    <!-- 审批节点信息 -->
    <el-card v-if="nodeList && auditList" style="margin-top: 10px">
      <audit-step :node-list="nodeList" :audit-list="auditList" />
    </el-card>
    <!-- 申请表单数据 -->
    <div id="printTest">
      <!-- 打印内容 -->
      <h3 style="text-align:center" v-text="templateName" />
      <check :instance-id="instanceId" />
      <audit-history-dialog :instance-id="instanceId" :visible.sync="auditHistoryVisible" />
    </div>
  </div>
</template>

<style media="printTest" scoped>
    @page {
      margin: 0mm; /* this affects the margin in the printer settings */
      display: block;
      width: 100%;
      overflow: hidden;
    }
  #printTest table {
    table-layout: auto !important;
  }

  #printTest .el-table__header-wrapper .el-table__header {
    width: 100% !important;
    border: solid 1px #f2f2f2;
  }
  #printTest .el-table__body-wrapper .el-table__body {
    width: 100% !important;
  }
  #printTest #pagetable table {
    table-layout: fixed !important;
  }
</style>

页面效果：

PS:

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