VUE如何利用vue-print-nb實(shí)現(xiàn)打印功能詳解

更新時(shí)間：2022年04月22日 11:23:52 作者：vk阿木

這篇文章主要給大家介紹了關(guān)于VUE如何利用vue-print-nb實(shí)現(xiàn)打印功能的相關(guān)資料,文中還給大家介紹了vue-print-nb使用中的常見問題，如空白頁,需要的朋友可以參考下

一、安裝vue-print-nb

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

Vue2.0版本安裝方法：

npm install vue-print-nb --save

Vue3.0版本安裝方法：

npm install vue3-print-nb --save

二、引入Vue項(xiàng)目

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   
}

三、參數(shù)說明

參數(shù)	作用	類型	可選項(xiàng)	默認(rèn)值
id	局部打印有效，標(biāo)識(shí)符	String	-	‘printId’
standard	局部打印有效，打印的文本類型	String	HTML5/loose/strict	HTML5
extraHead	局部打印有效，添加在打印區(qū)域的最頂端	String	-	-
extraCss	局部打印有效，為打印區(qū)域提供Stylesheet樣式表	String	-	-
popTitle	局部打印有效，編輯頁眉的標(biāo)題	String	-	Document Title
clickMounted	全局有效，調(diào)用v-print綁定的按鈕點(diǎn)擊事件callback	Function	-	this.Object
openCallback	全局有效，調(diào)用打印時(shí)的callback	Function	-	this.Object
closeCallback	全局有效，調(diào)用關(guān)閉打印的callback(無法區(qū)分確認(rèn)or取消)	Function	-	this.Object
beforeOpenCallback	全局有效，調(diào)用開始打印之前的callback	Function	-	this.Object
preview	全局有效，控制打印預(yù)覽	Boolean	true/false	false
previewTitle	編輯預(yù)覽頁面的預(yù)覽標(biāo)題	String	-	‘打印預(yù)覽’
previewPrintBtnLabel	編輯預(yù)覽頁面的打印按鈕文本	String	-	‘打印’
previewBeforeOpenCallback	調(diào)用打開預(yù)覽頁面之前的callback	Function	-	this.Object
previewOpenCallback	調(diào)用打開預(yù)覽頁面之后的callback	Function	-	this.Object
url	非局部打印有效，打印指定的URL，確保同源策略相同	String	-	-
asyncUrl	非局部打印有效，異步加載打印指定的URL，確保同源策略相同	Function	-	-
zIndex	預(yù)覽有效，預(yù)覽窗口的z-index，默認(rèn)是20002，最好比默認(rèn)值更高	String，Number	-	20002

四、應(yīng)用

template示例：

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

script示例：

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)簽，使用逗號(hào)分割
        preview: true, // 是否啟動(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ù)覽窗口！'); console.log(that.msg, this) }, // 預(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綁定的按鈕了！') },
        // url: 'http://localhost:8080/', // 打印指定的URL，確保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: '',
        extarCss: ''
      }
    }
  }
}

五、注意點(diǎn)

Callback函數(shù)中this指向當(dāng)前print object對(duì)象，that返回Vue對(duì)象；
不需要頁眉頁腳可以在打印彈窗頁面的更多設(shè)置里面取消選擇；
不設(shè)置popTitle參數(shù)頁眉標(biāo)題為undifined；
popTitle參數(shù)為空時(shí)，頁眉標(biāo)題默認(rèn)為Document Title。

補(bǔ)充：空白頁的解決方法

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

比如代碼是這樣：

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

后面沒內(nèi)容，但還是多了一個(gè)空白頁：

找到的最靠譜的方式

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

打印節(jié)點(diǎn)外邊距設(shè)置為0

元素被設(shè)置了寬高100%，繼承后也是100%，找到并取消100%設(shè)置，項(xiàng)目結(jié)構(gòu)復(fù)雜不好找的話，就給打印節(jié)點(diǎn)設(shè)置固定高度，打印一般固定尺寸如A4紙（210mm×297mm），所以固定寬高沒關(guān)系。媒體查詢，僅在打印時(shí)采用樣式：

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

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

總結(jié)

到此這篇關(guān)于VUE如何利用vue-print-nb實(shí)現(xiàn)打印功能的文章就介紹到這了,更多相關(guān)VUE vue-print-nb打印功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: