1、安装vue-print-nb依赖

（1）vue2安装方式

npm install vue-print-nb --save

（2）vue3安装方式

npm install vue3-print-nb --save

2、在main.js中全局注册

（1）vue2注册方式

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

（2）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')

3、基础使用案例

（1）设置打印区域id和打印按钮自定义属性

① id方式——在需要打印的单据内容最外面的div设置唯一的id，在打印弹框里的打印按钮设置自定义属性v-print，该属性值为打印单据div的唯一id

print1.png

② 对象配置方式——在js中定义一个对象，对象中可配置打印区域相关属性，在需要打印的单据内容最外面的div设置唯一的id，id值为js对象中的id值，在打印弹框里的打印按钮设置自定义属性v-print，该属性值为打印区域的对象

print3.png

（2）打印预览和设置

点击打印按钮，就会弹出打印预览和设置的弹框，在设置区域可以选择打印机、可以选择打印布局（横向、纵向）、打印纸张尺寸、边距和页眉页脚等

print2.png

4、其他需求

（1）打印隐藏内容

在打印弹框中需求显示查看的内容，但是在打印的时候需要隐藏，不打印显示

print4.png

（2）打印单据有2个以上，打印时需要自动分页打印

在一个打印弹框中显示所有的打印单据，但在打印时需要自动分页打印

有多个单据时，可以循环展示，在单据内容的最外层的div设置样式page-break-after:always，即可在打印时自动分页

print5.png print6.png print7.png

5、打印功能完整代码(安装好包，导入包后，可直接复制粘贴使用)

<template>
  <div class="index-box">
    <el-button type="primary" @click="print">打印</el-button>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="30%">
      <div id="printView">
        <div style="page-break-after:always">
          <h2 style="font-size: 22px;font-weight: bold;text-align: center;margin: 0;line-height: 122px;">采购单1</h2>
          <div style="padding-bottom: 7px;">
            <div style="display: inline-block;text-align: left;font-size: 18px;width: 33%;">
              姓名：张三
            </div>
            <div style="display: inline-block;text-align: center;font-size: 18px;width: 33%;">
              部门：软件研发部
            </div>
            <div style="display: inline-block;text-align: right;font-size: 18px;width: 33%;">
              职务：前端开发工程师
            </div>
          </div>
          <div style="padding-top: 10px;">
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="width: 100%;"
            >
              <thead>
                <tr>
                  <th style="padding: 4px;font-weight: normal;font-size: 18px;">
                    名称
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 18px;">
                    数量
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 18px;">
                    金额
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 18px;">
                    备注
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td style="padding: 4px;font-weight: normal;font-size: 18px;">
                    显示屏
                  </td>
                  <td style="padding: 4px;font-weight: normal;font-size: 18px;">
                    1台
                  </td>
                  <td style="padding: 4px;font-weight: normal;font-size: 18px;">
                    700
                  </td>
                  <td style="padding: 4px;font-weight: normal;font-size: 18px;">
                    下周一前需要使用
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style="padding-top: 40px;">
            <div
              style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
            >
              <span
                style="display: inline-block;vertical-align: top;width: 100px;"
              >
                申请人：
              </span>
              <span
                style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
              ></span>
            </div>
            <div
              style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
            >
              <span
                style="display: inline-block;vertical-align: top;width: 100px;"
              >
                审批人：
              </span>
              <span
                style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
              ></span>
            </div>
            <div
              style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
            >
              <span
                style="display: inline-block;vertical-align: top;width: 100px;"
              >
                采购员：
              </span>
              <span
                style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
              ></span>
            </div>
          </div>
          <div class="hidden">打印区域不需要打印的内容</div>
        </div>
        <div style="page-break-after:always">
          <h2 style="font-size: 22px;font-weight: bold;text-align: center;margin: 0;line-height: 122px;">采购单2</h2>
          <div style="padding-bottom: 7px;">
            <div style="display: inline-block;text-align: left;font-size: 18px;width: 33%;">
              姓名：张三
            </div>
            <div style="display: inline-block;text-align: center;font-size: 18px;width: 33%;">
              部门：软件研发部
            </div>
            <div style="display: inline-block;text-align: right;font-size: 18px;width: 33%;">
              职务：前端开发工程师
            </div>
          </div> 
          <div style="padding-top: 10px;">
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="width: 100%;"
            >
              <thead>
                <tr>
                  <th style="padding: 4px;font-weight: normal;font-size: 18px;">
                    名称
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 18px;">
                    数量
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 18px;">
                    金额
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 18px;">
                    备注
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td style="padding: 4px;font-weight: normal;font-size: 18px;">
                    显示屏
                  </td>
                  <td style="padding: 4px;font-weight: normal;font-size: 18px;">
                    1台
                  </td>
                  <td style="padding: 4px;font-weight: normal;font-size: 18px;">
                    700
                  </td>
                  <td style="padding: 4px;font-weight: normal;font-size: 18px;">
                    下周一前需要使用
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style="padding-top: 40px;">
            <div
              style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
            >
              <span
                style="display: inline-block;vertical-align: top;width: 100px;"
              >
                申请人：
              </span>
              <span
                style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
              ></span>
            </div>
            <div
              style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
            >
              <span
                style="display: inline-block;vertical-align: top;width: 100px;"
              >
                审批人：
              </span>
              <span
                style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
              ></span>
            </div>
            <div
              style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
            >
              <span
                style="display: inline-block;vertical-align: top;width: 100px;"
              >
                采购员：
              </span>
              <span
                style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
              ></span>
            </div>
          </div>
          <div class="hidden">打印区域不需要打印的内容</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button v-print="'#printView'" type="primary">打 印</el-button> -->
        <el-button v-print="printViewInfo" type="primary">打 印</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    return {
      dialogVisible: false,
      msg: "打印",
      printViewInfo: {
        id: "printView", //打印区域的唯一的id属性
        popTitle: '配置页眉标题', // 页眉文字 （不设置时显示undifined）（页眉页脚可以在打印页面的更多设置的选项中取消勾选）
        extraHead: '打印，印刷', // 最左上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: false, // 是否启动预览模式，默认是false （开启预览模式ture会占满整个屏幕，不建议开启，除非业务需要）
        previewTitle: '预览的标题', // 打印预览的标题(预览模式preview为true时才显示)
        previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印(预览模式preview为true时才显示)
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        previewBeforeOpenCallback (that) { console.log('正在加载预览窗口！'); console.log(that.msg, this) }, // 预览窗口打开之前的callback (预览模式preview为true时才执行) （that可以取到data里的变量值）
        previewOpenCallback () { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback (预览模式preview为true时才执行)
        beforeOpenCallback () { console.log('开始打印之前！') }, // 开始打印之前的callback
        openCallback () { console.log('执行打印了！') }, // 调用打印时的callback
        closeCallback () { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted () { console.log('点击v-print绑定的按钮了！') },
        // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: '',
        extarCss: ''
      }
    }
  },
  computed:{},
  created () {},
  mounted () {},
  methods: {
    print() {
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="less">
@media print {
  .hidden{
    display: none;
  }
}
</style>

注意！！！

1、element-ui 组件在打印时会样式崩塌，所以在打印区域div中最好不要使用element-ui 组件，直接使用原生组件样式；

2、打印区域样式最好使用内联样式，或者先加载样式再加载组件，否则样式会崩塌。