vue实现打印指定页面内容

vue-print-nb

使用 vue-print-nb 这个插件能够实现打印

安装

// 安装 打印组件
npm install vue-print-nb --save

引用

vue2引入

import Print from 'vue-print-nb'
// 全局引用
Vue.use(Print);

// 或者

// 单组件引用
import print from 'vue-print-nb'
// 在自定义指令中注册
directives: {
    print   
}

vue3引入

// 全局引用
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')

// 或者

// 单组件引用
import print from 'vue3-print-nb'
// 在自定义指令中注册
directives: {
    print   
}

API

代码展示

        <el-button type="primary" v-print="printOption">打印</el-button>
        <div id="nbprint">
          <div class="flex align_end justify_center" style="margin-bottom: 10px;">
            <div class="center font_22" v-if="showStatus">{{ schoolName }}</div>
            <div class="font_16" style="margin-left: 20px;">{{ displayName }}</div>
          </div>
          <table class="cs_table" id="table" v-if="showStatus">
            <tr>
              <td class="grayStyle" rowspan="2">卡　　号</td>
              <td class="grayStyle" rowspan="2">姓　　名</td>
              <td class="grayStyle" colspan="2">消　　费</td>
              <td class="grayStyle" colspan="2">充　　值</td>
              <td class="grayStyle" colspan="2">减　　款</td>
              <td class="grayStyle" rowspan="2">签　　字</td>
            </tr>
            <tr>
              <td class="grayStyle">金　　额</td>
              <td class="grayStyle">次　　数</td>
              <td class="grayStyle">金　　额</td>
              <td class="grayStyle">次　　数</td>
              <td class="grayStyle">金　　额</td>
              <td class="grayStyle">次　　数</td>
            </tr>
            <tr v-for="(item, index) in cashierList" :key="index">
              <td>{{ cashierList[index].cardNo }}</td>
              <td>{{ cashierList[index].userName }}</td>
              <td>{{ cashierList[index].consumeAmount }}</td>
              <td>{{ cashierList[index].consumeTimes }}</td>
              <td>{{ cashierList[index].rechargeAmount }}</td>
              <td>{{ cashierList[index].rechargeTimes }}</td>
              <td>{{ cashierList[index].deductionAmount }}</td>
              <td>{{ cashierList[index].deductionTimes }}</td>
              <td></td>
            </tr>
            <tr>
              <td colspan="2">合　　计</td>
              <td>{{ totalConsumeAmount }}</td>
              <td>{{ totalConsumeTimes }}</td>
              <td>{{ totalRechargeAmount }}</td>
              <td>{{ totalRechargeTimes }}</td>
              <td>{{ totalDeductionAmount }}</td>
              <td>{{ totalDeductionTimes }}</td>
              <td></td>
            </tr>
          </table>
        </div>

export default {
  data() {
    return {
      printOption: {
        id: "nbprint", // 打印元素的id 不需要携带#号
        preview: false, // 开启打印预览
        previewTitle: "打印预览", // 打印预览标题
        popTitle: "部门消费情况表", // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
        // 头部文字 默认空 在节点中添加 DOM 节点， 并用,(Print local range only)分隔多个节点
        // extraHead: "https://***/***.css, https://***/***.css",
        // 新的 CSS 样式表， 并使用,（仅打印本地范围）分隔多个节点
        // extraCss: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        previewBeforeOpenCallback: () => {
          console.log("触发打印预览打开前回调");
        },
        previewOpenCallback: () => {
          console.log("触发打开打印预览回调");
        },
        beforeOpenCallback: () => {
          console.log("触发打印工具打开前回调");
        },
        openCallback: () => {
          console.log("触发打开打印工具回调");
        },
        closeCallback: () => {
          console.log("触发关闭打印工具回调");
        },
        clickMounted: () => {
          console.log("触发点击打印回调");
        },
      },
    }
  },
  methods: {
    //调用打印工具前的回调函数
    beforeOpenCallback(vue) {
      vue.printLoading = true;
      console.log("打开之前");
    },
    //调用打印工具成功回调函数
    openCallback(vue) {
      vue.printLoading = false;
      console.log("执行了打印");
    },
    //关闭打印机的回调
    closeCallback(vue) {
      console.log("关闭了打印工具");
    },
  }
}