欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年04月22日 11:23:52   作者:vk阿木  
這篇文章主要給大家介紹了關(guān)于VUE如何利用vue-print-nb實現(xiàn)打印功能的相關(guān)資料,文中還給大家介紹了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   
}

三、參數(shù)說明

參數(shù)作用類型可選項默認(rèn)值
id局部打印有效,標(biāo)識符String-‘printId’
standard局部打印有效,打印的文本類型StringHTML5/loose/strictHTML5
extraHead局部打印有效,添加在打印區(qū)域的最頂端String--
extraCss局部打印有效,為打印區(qū)域提供Stylesheet樣式表String--
popTitle局部打印有效,編輯頁眉的標(biāo)題String-Document Title
clickMounted全局有效,調(diào)用v-print綁定的按鈕點擊事件callbackFunction-this.Object
openCallback全局有效,調(diào)用打印時的callbackFunction-this.Object
closeCallback全局有效,調(diào)用關(guān)閉打印的callback(無法區(qū)分確認(rèn)or取消)Function-this.Object
beforeOpenCallback全局有效,調(diào)用開始打印之前的callbackFunction-this.Object
preview全局有效,控制打印預(yù)覽Booleantrue/falsefalse
previewTitle編輯預(yù)覽頁面的預(yù)覽標(biāo)題String-‘打印預(yù)覽’
previewPrintBtnLabel編輯預(yù)覽頁面的打印按鈕文本String-‘打印’
previewBeforeOpenCallback調(diào)用打開預(yù)覽頁面之前的callbackFunction-this.Object
previewOpenCallback調(diào)用打開預(yù)覽頁面之后的callbackFunction-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)簽,使用逗號分割
        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: ''
      }
    }
  }
}

五、注意點

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

補充:空白頁的解決方法

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

比如代碼是這樣:

<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)容,但還是多了一個空白頁:

找到的最靠譜的方式

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

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

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

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

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

總結(jié)

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

相關(guān)文章

  • vue3 setup中defineEmits與defineProps的使用案例詳解

    vue3 setup中defineEmits與defineProps的使用案例詳解

    在父組件中定義String、Number、Boolean、Array、Object、Date、Function、Symbol這些類型的數(shù)據(jù),使用defineEmits會返回一個方法,使用一個變量emits(變量名隨意)去接收,本文給大家介紹vue3 setup中defineEmits與defineProps的使用案例,感興趣的朋友一起看看吧
    2023-10-10
  • vue前端傳空值、空字符串的問題及解決

    vue前端傳空值、空字符串的問題及解決

    這篇文章主要介紹了vue前端傳空值、空字符串的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • Vue如何基于vue-i18n實現(xiàn)多國語言兼容

    Vue如何基于vue-i18n實現(xiàn)多國語言兼容

    這篇文章主要介紹了Vue如何基于vue-i18n實現(xiàn)多國語言兼容,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-07-07
  • axios封裝,使用攔截器統(tǒng)一處理接口,超詳細(xì)的教程(推薦)

    axios封裝,使用攔截器統(tǒng)一處理接口,超詳細(xì)的教程(推薦)

    這篇文章主要介紹了axios封裝使用攔截器處理接口,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • Vue.js創(chuàng)建Calendar日歷效果

    Vue.js創(chuàng)建Calendar日歷效果

    這篇文章主要為大家詳細(xì)介紹了Vue.js創(chuàng)建Calendar日歷效果的過程,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • Vue3.0中如何監(jiān)聽props方法

    Vue3.0中如何監(jiān)聽props方法

    這篇文章主要介紹了Vue3.0中如何監(jiān)聽props方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 9種方法優(yōu)化jQuery代碼詳解

    9種方法優(yōu)化jQuery代碼詳解

    本文將詳細(xì)介紹jQuery代碼優(yōu)化的9種方法,需要的朋友可以參考下
    2020-02-02
  • vue3.0中的雙向數(shù)據(jù)綁定方法及優(yōu)缺點

    vue3.0中的雙向數(shù)據(jù)綁定方法及優(yōu)缺點

    這篇文章主要介紹了vue3.0中的雙向數(shù)據(jù)綁定方法 ,文中通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-08-08
  • vue3編寫組件的幾種實現(xiàn)方式

    vue3編寫組件的幾種實現(xiàn)方式

    這篇文章主要介紹了vue3編寫組件的幾種實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • Vue前端判斷數(shù)據(jù)對象是否為空的實例

    Vue前端判斷數(shù)據(jù)對象是否為空的實例

    這篇文章主要介紹了Vue前端判斷數(shù)據(jù)對象是否為空的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09

最新評論