vue3 页面打印 vue3-print-nb

页面打印效果图:

之前使用 vue2 用的是 vue-print-nb

现在项目是 vue3 组件用的是 vue3-print-nb

使用方法

安装 npm i vue3-print-nb --save 或者 yarn add vue3-print-nb

在 main.js 中引入

import { createApp } from "vue";

import App from "./App.vue";

import print from "vue3-print-nb";

const app = createApp(App);

app.use(print);

组件中使用

print.vue

<template>
    <div>
        <div id="printContent">
        ....
        打印内容
        </div>
        <a-button v-print="printObj" type="primary">打印</a-button>
    </div>
</template>

<script>
export default {
    name: "print",
    setup() {
        const printObj = {
            id: "printContent",
            popTitle: "页面打印",
        };
        return {
            printObj
        }
    }
}
</script>
<style>
/* 去掉页脚 */
@page {
  size: auto;
  margin: 15mm auto 5mm;
}

printObj支持的API

ids: id, // * 局部打印必传入id

url: binding.value.url, // 打印指定的网址,这里不能跟id共存 如果共存id的优先级会比较高

standard: "", // 文档类型,默认是html5,可选 html5,loose,strict

extraHead: binding.value.extraHead, // 附加在head标签上的额外标签,使用逗号分隔

extraCss: binding.value.extraCss, // 额外的css连接,多个逗号分开

previewTitle: binding.value.previewTitle || "打印预览", // 打印预览的标题

zIndex: binding.value.zIndex || 20002, // 预览窗口的z-index

previewPrintBtnLabel: binding.value.previewPrintBtnLabel || "打印", // 打印预览的标题

popTitle: binding.value.popTitle, // title的标题

preview: binding.value.preview || false, // 是否启动预览模式

asyncUrl: binding.value.asyncUrl,

previewBeforeOpenCallback() {

// 预览窗口打开之前的callback

binding.value.previewBeforeOpenCallback &&

binding.value.previewBeforeOpenCallback(vue);

},

previewOpenCallback() {

// 预览窗口打开之后的callback

binding.value.previewOpenCallback &&

binding.value.previewOpenCallback(vue);

},

openCallback() {

// 调用打印之后的回调事件

binding.value.openCallback && binding.value.openCallback(vue);

},

closeCallback() {

binding.value.closeCallback && binding.value.closeCallback(vue);

},

beforeOpenCallback() {

binding.value.beforeOpenCallback &&

binding.value.beforeOpenCallback(vue);

},

这个vue3版本的打印组件,npm包使用的是打包压缩后的代码, 之前vue-print-nb里面有源码组件

不过一般的打印需求基本满足,如果需要改动源码实现功能的

也可以将vue-print-nb源码放到项目中,即print里面的代码

如:

只是要改动一下,vue3自定义指令和vue2自定义指令不太一样,将print.js中的 bind(el, binding, vnode) {} 函数修改为 mounted: (el, binding, vnode) => {}, 去掉vue.$nextTick, 还要注意替换main.js文件里的print引用文件地址 就可以使用了

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值