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

目录

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

Web 实现页面打印

安装

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

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

引用

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：被打印的区域需要被渲染出来并且不能被隐藏才可以打印）

打印预览

分页打印

补充：vue-print-nb插件的一些优化

1.去掉页眉页脚

2.打印內容不自动换行问题

只需要给不自动换行的标签加上 word-wrap:break-word; 即可。

总结

到此这篇关于vue-print-nb实现页面打印功能的文章就介绍到这了,更多相关vue-print-nb页面打印内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！