安装

npm i vue3-print-nb -s

我的版本 0.1.4

注册

import { createApp } from 'vue'
import pinia from './store'
import router from './router'
import './assets/css/main.scss'
import { globalRegister } from '@/global/register'
import 'ant-design-vue/es/message/style/css'
import App from './App.vue'
import print from 'vue3-print-nb' // 重要

// Vue.prototype.currency = currency
const app = createApp(App)
app.use(globalRegister)
app.use(pinia)
app.use(router)
app.use(print) // 重要

app.mount('#app')

使用

<template>
//   v-print="print" 重要
  <a-button key="submit" type="primary" v-print="print"
    ><check-circle-outlined />确定打印</a-button
  >
  <div class="print" id="printArea" style="margin-top: 0">
  。。。。。。。。。。。你的内容
  </div>
</template>

<script setup lang="ts">
const print = {
  id: 'printArea',
  popTitle: '配置页眉标题', // 打印配置页上方的标题
  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: '预览的标题', // 打印预览的标题
  previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() {
    // console.log('正在加载预览窗口！')
    console.log(this)
  }, // 预览窗口打开之前的callback
  previewOpenCallback() {
    // console.log('已经加载完预览窗口，预览打开了！')
  }, // 预览窗口打开时的callback
  beforeOpenCallback() {
    // console.log('开始打印之前！')
  }, // 开始打印之前的callback
  openCallback() {
    // console.log('执行打印了！')
  }, // 调用打印时的callback
  closeCallback() {
  }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() {
    // 关闭打印
    isShowPrint.value = true
    document.title = oldTitle.value

    emit('clickPrint')
  },
  // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
  // asyncUrl (reslove) {
  //   setTimeout(() => {
  //     reslove('http://localhost:8080/')
  //   }, 2000)
  // },
  standard: '',
  extarCss: ''
}

</script>
<style media="print">
@page {
  size: landscape;
  margin: 0em 0em;
  margin-top: 3em;
  margin-bottom: 5.5em;
}
@-moz-document url-prefix() {
  @page {
    size: landscape;
    margin: 0em 0;
    margin-top: 3em;
    margin-bottom: 4em;
  }
}
html {
  background-color: #ffffff;
  height: auto;
  margin: 0px;
}
.page {
  overflow: visible !important;
}
</style>

代码经过删减，如果使用有问题，可与我联系