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引用文件地址 就可以使用了