页面打印效果图:
之前使用 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引用文件地址 就可以使用了 标签：vue,nb,打印,binding,value,vue3,print From： https://www.cnblogs.com/steamed-twisted-roll/p/17405527.html