vue3打印当前页面

vue3使用打印插件安装:

npm install vue3-print-nb --save

vue2使用打印插件安装:

npm install vue-print-nb --save

使用方式:

// 在需要打印的dom上添加id
<div class="view-content" id="printBox"></div>

// 给按钮绑定打印事件
// v-print
<el-button class="save-btn" @click="setPrint" v-print="print">打印</el-button>


// 打印调用 以及 相关配置
// id 必须跟需要打印的dom所绑定的id一致
const print = reactive({
  id: 'printBox',//必须跟dom的id一致
  popTitle: '', // 打印配置页上方的标题
  extraHead: '', // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分割
  preview: false, // 是否启动预览模式,默认是false
  previewTitle: '预览', // 打印预览的标题
  previewPrintBtnLabel: '预览结束,开始打印', // 打印预览的标题下方的按钮文本,点击可进入打印
  zIndex: 20002, // 预览窗口的z-index,默认是20002,最好比默认值更高
  previewBeforeOpenCallback() { }, // 预览窗口打开之前的callback
  previewOpenCallback() { }, // 预览窗口打开时的callback
  beforeOpenCallback() { }, // 开始打印之前的callback
  openCallback() { }, // 调用打印时的callback
  closeCallback() { }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() { },
})

插件地址:https://github.com/Power-kxLee/vue3-print-nb

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值