vue3+ts 使用vue-print-nb 打印功能【完美】

安装

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>

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

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值