vue3-print-nb实现页面打印(含分页打印)示例代码
作者：气乃本
大多数后台系统中都存在打印的需求,在有打印需求时,对前端来说当然是直接打印页面更容易,下面这篇文章主要给大家介绍了关于vue3-print-nb实现页面打印(含分页打印)的相关资料,需要的朋友可以参考下
安装vue3-print-nb
npm install vue3-print-nb --save
引用vue3-print-nb
全局引入
// 全局引用
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
官网地址：https://github.com/Power-kxLee/vue3-print-nb
官网有详细介绍
示例代码
全页面打印
<button v-print>打印整个页面</button>
局部打印
被打印的区域需要被渲染出来，隐藏的元素不能打印
<div id="a">
<p>打印我吧</p>
<p>打印我吧</p>
<p>打印我吧</p>
</div>
//写法一
<button v-print="#a">局部打印</button>
//写法二(可以接受对象)
<button v-print="{id:a}">局部打印</button>分页打印
<template>
<div>
<button v-print="'#a'">打印</button>
<div id="a">
// 方法一
// 使用div包裹需要分页的块 使用 css属性 page-break-after:always进行分页
<div style="page-break-after:always">第一页</div>
<div style="page-break-after:always">第二页</div>
</div>
</div>
</template>
<style>
// 方法二
// 使用媒体查询 在打印时设置 body 和 html 的高度为auto
@media print {
@page {
size: auto;
}
body, html { //如果vue最外层id，默认是#app。如果设置了height:100%;，那么#app也加
height: auto !important;
}
}
</style>总结
到此这篇关于vue3-print-nb实现页面打印(含分页打印)的文章就介绍到这了,更多相关vue3-print-nb实现页面打印内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！