VUE怎么利用vue-print-nb實現打印功能

這篇文章主要講解了“VUE怎么利用vue-print-nb實現打印功能”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“VUE怎么利用vue-print-nb實現打印功能”吧！

一、安裝vue-print-nb

沒有什么前提要求，直接安裝即可，但因為Vue2.0和Vue3.0有著不同的用法，因此需要安裝的版本也不同，各位看官自行取舍。

Vue2.0版本安裝方法：

npm install vue-print-nb --save

Vue3.0版本安裝方法：

npm install vue3-print-nb --save

二、引入Vue項目

Vue2.0引入方式：

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

// or

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

Vue3.0引入方式：

// 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示例：

<template>
  <div class="hello">
    <h2>{{ msg }}</h2>
    <h3>Essential Links</h3>
    // 局部打印文本以及按鈕
    <div id="printArea">Print Area</div>
    <button v-print="print">Print!</button>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

script示例：

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

五、注意點

• Callback函數中this指向當前print object對象，that返回Vue對象；

• 不需要頁眉頁腳可以在打印彈窗頁面的更多設置里面取消選擇；

• 不設置popTitle參數頁眉標題為undifined；

• popTitle參數為空時，頁眉標題默認為Document Title。

補充：空白頁的解決方法

有時頁面看著很正常，打印預覽就多了一頁空白頁，其原因就是邊距問題，肉眼看著沒內容，實際有空白間距

比如代碼是這樣：

<div id="printTest" >
  文字
  <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 {
/*最外層打印節點*/
  #printTest {
    display:block;
    height: auto;
    overflow: hidden;
  }
}
</style>

打印節點外邊距設置為0

元素被設置了寬高100%，繼承后也是100%，找到并取消100%設置，項目結構復雜不好找的話，就給打印節點設置固定高度，打印一般固定尺寸如A4紙（210mm×297mm），所以固定寬高沒關系。媒體查詢，僅在打印時采用樣式：

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

上述方法中，如果剛好占一頁，（標準盒子）再添加邊框就會多一頁空白，說明包括邊框、內外邊距、內容只要超過頁面高度，就會再開一頁。
如果溢出的部分（如1px邊框、文字）不足以顯示到下一頁而仍顯示在上一頁；或者溢出部分（如外邊距）不顯示時，就會顯示空白頁。

感謝各位的閱讀，以上就是“VUE怎么利用vue-print-nb實現打印功能”的內容了，經過本文的學習后，相信大家對VUE怎么利用vue-print-nb實現打印功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！