npm install vue3-print-nb --save

// 全局引用
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   
}

<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>