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>