npm install vue3-print-nb

//引入
import print from 'vue3-print-nb'
//掛載
const app = createApp(App)
app.use(print)

<!-- 打印區(qū)域容器 -->
<div id="printBox">
<span>我就是被打印的內(nèi)容</span>
<span>在#printBox 容器里的內(nèi)容都會(huì)被打印噢</span>
</div>
<!-- 按鈕綁定打印 -->
<button v-print="print">點(diǎn)擊打開打印預(yù)覽</button>

//這里是打印的配置項(xiàng)
const  print=ref({
        id: 'printBox',//這里的id就是上面我們的打印區(qū)域id，實(shí)現(xiàn)指哪打哪
        popTitle: '配置頁(yè)眉標(biāo)題', // 打印配置頁(yè)上方的標(biāo)題
        extraHead: '', // 最上方的頭部文字，附加在head標(biāo)簽上的額外標(biāo)簽，使用逗號(hào)分割
        preview: false, // 是否啟動(dòng)預(yù)覽模式，默認(rèn)是false
        previewTitle: '預(yù)覽的標(biāo)題', // 打印預(yù)覽的標(biāo)題
        previewPrintBtnLabel: '預(yù)覽結(jié)束，開始打印', // 打印預(yù)覽的標(biāo)題下方的按鈕文本，點(diǎn)擊可進(jìn)入打印
        zIndex: 20002, // 預(yù)覽窗口的z-index，默認(rèn)是20002，最好比默認(rèn)值更高
        previewBeforeOpenCallback() { console.log('正在加載預(yù)覽窗口！'); }, // 預(yù)覽窗口打開之前的callback
        previewOpenCallback() { console.log('已經(jīng)加載完預(yù)覽窗口，預(yù)覽打開了！') }, // 預(yù)覽窗口打開時(shí)的callback
        beforeOpenCallback() { console.log('開始打印之前！') }, // 開始打印之前的callback
        openCallback() { console.log('執(zhí)行打印了！') }, // 調(diào)用打印時(shí)的callback
        closeCallback() { console.log('關(guān)閉了打印工具！') }, // 關(guān)閉打印的callback(無法區(qū)分確認(rèn)or取消)
        clickMounted() { console.log('點(diǎn)擊v-print綁定的按鈕了！') },
      })

<template>
    <div>
        <button v-print="'#a'">打印</button>
        <div id="a">
             // 方法一
             // 使用div包裹需要分頁(yè)的塊 使用 css屬性 page-break-after:always進(jìn)行分頁(yè)
            <div style="page-break-after:always">第一頁(yè)</div>
            <div style="page-break-after:always">第二頁(yè)</div>
        </div>
    </div>
</template>
<style>
     // 方法二
     // 使用媒體查詢 在打印時(shí)設(shè)置 body 和 html 的高度為auto
     @media print {
        @page {
          size:  auto;
        }
        body, html {   //如果vue最外層id，默認(rèn)是#app。如果設(shè)置了height:100%;，那么#app也加
          height: auto !important;
        }
      }
</style>