大飞_dafei

导航

Vue2和Vue3使用vue-print-nb实现打印功

Vue2和Vue3使用vue-print-nb实现打印功

Vue2使用vue-print-nb实现打印功
Vue3使用vue3-print-nb实现打印功

Vue2

Vue2.0版本安装方法:

npm install vue-print-nb --save
// 1. 全局挂载
import Print from 'vue-print-nb'
Vue.use(Print)

// or

// 2. 自定义指令
import print from 'vue-print-nb'
directives: {
  print
}

 

Vue3.0

npm install vue3-print-nb --save
// 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   
}
<template>
  <h3 style="color: red">
    <div  id="printArea"> sssssssss</div>

    <button v-print="print">打印22</button>
  </h3>
</template>

<script setup>
const print = ref({
  id: 'printArea',
  popTitle: '配置页眉标题', // 打印配置页上方的标题
  extraHead: '打印', // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分割
  preview: true, // 是否启动预览模式,默认是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 () { console.log('关闭了打印工具!') }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted () { console.log('点击v-print绑定的按钮了!') },
  // url: 'http://localhost:8080/', // 打印指定的URL,确保同源策略相同
  // asyncUrl (reslove) {
  //   setTimeout(() => {
  //     reslove('http://localhost:8080/')
  //   }, 2000)
  // },
  standard: '',
  extarCss: ''
})
</script>

 

其他推荐

VUE如何利用vue-print-nb实现打印功能详解

使用vue-print-nb插件页面空白以及打印没有样式问题

 

posted on 2022-12-22 21:55  大飞_dafei  阅读(1320)  评论(0编辑  收藏  举报