vue-print-nb实现页面打印功能实例(含分页打印) vue-print-nb实现页面打印功能实

安装
引用
API
示例代码
补充：vue-print-nb插件的一些优化
总结

Web 实现页面打印

安装官网地址：https://github.com/Power-kxLee/vue3-print-nb

// 安装打印组件npm install vue-print-nb --save

【vue-print-nb实现页面打印功能实例(含分页打印)】
引用 vue2引用

import Print from 'vue-print-nb'// 全局引用Vue.use(Print); // 或者// 单组件引用import print from 'vue-print-nb'// 在自定义指令中注册directives: {print}

vue3引用

// 全局引用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')// 或者// 单组件引用import print from 'vue3-print-nb'// 在自定义指令中注册directives: {print}

API

属性	类型	默认值	必要	可选值	描述
id	String	-	是	-	范围打印 ID（如果设置url则可以不设置id）
url	String	-	否	-	打印指定的 URL。（不允许同时设置ID
popTitle	String	-	否	-	默认使用浏览器标签名，为空时为undefined
standard	String	HTML5	否	html5，loose，strict	打印的文档类型
extraHead	String	-	否	-	在节点中添加 DOM 节点，并用,(Print local range only)分隔多个节点
extraCss	String	-	否	-	新的 CSS 样式表，并使用,（仅打印本地范围）分隔多个节点
openCallback	Function	-	否	-	调用打印工具成功回调函数
closeCallback	Function	-	否	-	关闭打印工具成功回调函数
beforeOpenCallback	Function	-	否	-	调用打印工具前的回调函数
preview	Boolean	false	否	true,false	预览工具
previewTitle	String	-	否	-	‘打印预览’
previewPrintBtnLabel	String	打印	否	-	打印按钮名称
previewBeforeOpenCallback	Function	-	否	-	预览打开前回调函数
previewOpenCallback	Function	-	否	-	预览打开回调函数
clickMounted	Function	-	否	-	点击打印按钮回调函数

示例代码全页面打印

局部打印（Tip：被打印的区域需要被渲染出来并且不能被隐藏才可以打印）

序号	姓名	年龄	性别	手机	邮箱	地址	工龄	岗位	薪资
{{ index + 1}}	{{ item.name }}	{{ item.age }}	{{ item.sex }}	{{ item.phone }}	{{ item.mail }}	{{ item.address }}	{{ item.workAge }}	{{ item.jobs }}	{{ item.salary }}