npm install vue-print-nb --save

npm install vue3-print-nb --save

// 1. 全局掛載
import Print from 'vue-print-nb'
Vue.use(Print)

// or

// 2. 自定義指令
import print from 'vue-print-nb'
directives: {
  print
}

// 1. 全局掛載
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')

// or 

// 2. 自定義指令
import print from 'vue3-print-nb'
directives: {
    print   
}

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    // 局部打印文本以及按鈕
    <div id="printArea">Print Area</div>
    <button v-print="print">Print!</button>
    <ul>
      <li>
        <a
          
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

export default {
  name: 'HelloWorld',
  data () {
    let that = this
    return {
      msg: 'Welcome to Your Vue.js App',
      print: {
        id: 'printArea',
        popTitle: '配置頁眉標(biāo)題', // 打印配置頁上方的標(biāo)題
        extraHead: '打印', // 最上方的頭部文字，附加在head標(biāo)簽上的額外標(biāo)簽，使用逗號分割
        preview: true, // 是否啟動預(yù)覽模式，默認(rèn)是false
        previewTitle: '預(yù)覽的標(biāo)題', // 打印預(yù)覽的標(biāo)題
        previewPrintBtnLabel: '預(yù)覽結(jié)束，開始打印', // 打印預(yù)覽的標(biāo)題下方的按鈕文本，點擊可進(jìn)入打印
        zIndex: 20002, // 預(yù)覽窗口的z-index，默認(rèn)是20002，最好比默認(rèn)值更高
        previewBeforeOpenCallback () { console.log('正在加載預(yù)覽窗口！'); console.log(that.msg, this) }, // 預(yù)覽窗口打開之前的callback
        previewOpenCallback () { console.log('已經(jīng)加載完預(yù)覽窗口，預(yù)覽打開了！') }, // 預(yù)覽窗口打開時的callback
        beforeOpenCallback () { console.log('開始打印之前！') }, // 開始打印之前的callback
        openCallback () { console.log('執(zhí)行打印了！') }, // 調(diào)用打印時的callback
        closeCallback () { console.log('關(guān)閉了打印工具！') }, // 關(guān)閉打印的callback(無法區(qū)分確認(rèn)or取消)
        clickMounted () { console.log('點擊v-print綁定的按鈕了！') },
        // url: 'http://localhost:8080/', // 打印指定的URL，確保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: '',
        extarCss: ''
      }
    }
  }
}

<div id="printTest" style="border:1px solid black">
  文字
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  文字123
</div>

<style>
@media print {
/*最外層打印節(jié)點*/
  #printTest {
    display:block;
    height: auto;
    overflow: hidden;
  }
}
</style>

// 打印媒體查詢
@media print {
  #printTest{
    margin：0;
    height: 266.5mm;//采用默認(rèn)頁眉頁腳時，單頁內(nèi)容大概長度，多頁時倍數(shù)乘
  }
}