VUE如何利用vue-print-nb實(shí)現(xiàn)打印功能詳解
一、安裝vue-print-nb
沒(méi)有什么前提要求,直接安裝即可,但因?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ù)說(shuō)明
參數(shù) | 作用 | 類(lèi)型 | 可選項(xiàng) | 默認(rèn)值 |
---|---|---|---|---|
id | 局部打印有效,標(biāo)識(shí)符 | String | - | ‘printId’ |
standard | 局部打印有效,打印的文本類(lèi)型 | String | HTML5/loose/strict | HTML5 |
extraHead | 局部打印有效,添加在打印區(qū)域的最頂端 | String | - | - |
extraCss | 局部打印有效,為打印區(qū)域提供Stylesheet樣式表 | String | - | - |
popTitle | 局部打印有效,編輯頁(yè)眉的標(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(無(wú)法區(qū)分確認(rèn)or取消) | Function | - | this.Object |
beforeOpenCallback | 全局有效,調(diào)用開(kāi)始打印之前的callback | Function | - | this.Object |
preview | 全局有效,控制打印預(yù)覽 | Boolean | true/false | false |
previewTitle | 編輯預(yù)覽頁(yè)面的預(yù)覽標(biāo)題 | String | - | ‘打印預(yù)覽’ |
previewPrintBtnLabel | 編輯預(yù)覽頁(yè)面的打印按鈕文本 | String | - | ‘打印’ |
previewBeforeOpenCallback | 調(diào)用打開(kāi)預(yù)覽頁(yè)面之前的callback | Function | - | this.Object |
previewOpenCallback | 調(diào)用打開(kāi)預(yù)覽頁(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: '配置頁(yè)眉標(biāo)題', // 打印配置頁(yè)上方的標(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é)束,開(kāi)始打印', // 打印預(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ù)覽窗口打開(kāi)之前的callback previewOpenCallback () { console.log('已經(jīng)加載完預(yù)覽窗口,預(yù)覽打開(kāi)了!') }, // 預(yù)覽窗口打開(kāi)時(shí)的callback beforeOpenCallback () { console.log('開(kāi)始打印之前!') }, // 開(kāi)始打印之前的callback openCallback () { console.log('執(zhí)行打印了!') }, // 調(diào)用打印時(shí)的callback closeCallback () { console.log('關(guān)閉了打印工具!') }, // 關(guān)閉打印的callback(無(wú)法區(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ì)象;
- 不需要頁(yè)眉頁(yè)腳可以在打印彈窗頁(yè)面的更多設(shè)置里面取消選擇;
- 不設(shè)置popTitle參數(shù)頁(yè)眉標(biāo)題為undifined;
- popTitle參數(shù)為空時(shí),頁(yè)眉標(biāo)題默認(rèn)為Document Title。
補(bǔ)充:空白頁(yè)的解決方法
有時(shí)頁(yè)面看著很正常,打印預(yù)覽就多了一頁(yè)空白頁(yè),其原因就是邊距問(wèn)題,肉眼看著沒(méi)內(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>
后面沒(méi)內(nèi)容,但還是多了一個(gè)空白頁(yè):
找到的最靠譜的方式
<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ù)雜不好找的話(huà),就給打印節(jié)點(diǎn)設(shè)置固定高度,打印一般固定尺寸如A4紙(210mm×297mm),所以固定寬高沒(méi)關(guān)系。媒體查詢(xún),僅在打印時(shí)采用樣式:
// 打印媒體查詢(xún) @media print { #printTest{ margin:0; height: 266.5mm;//采用默認(rèn)頁(yè)眉頁(yè)腳時(shí),單頁(yè)內(nèi)容大概長(zhǎng)度,多頁(yè)時(shí)倍數(shù)乘 } }
上述方法中,如果剛好占一頁(yè),(標(biāo)準(zhǔn)盒子)再添加邊框就會(huì)多一頁(yè)空白,說(shuō)明包括邊框、內(nèi)外邊距、內(nèi)容只要超過(guò)頁(yè)面高度,就會(huì)再開(kāi)一頁(yè)。
如果溢出的部分(如1px邊框、文字)不足以顯示到下一頁(yè)而仍顯示在上一頁(yè);或者溢出部分(如外邊距)不顯示時(shí),就會(huì)顯示空白頁(yè)。
總結(jié)
到此這篇關(guān)于VUE如何利用vue-print-nb實(shí)現(xiàn)打印功能的文章就介紹到這了,更多相關(guān)VUE vue-print-nb打印功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3 setup中defineEmits與defineProps的使用案例詳解
在父組件中定義String、Number、Boolean、Array、Object、Date、Function、Symbol這些類(lèi)型的數(shù)據(jù),使用defineEmits會(huì)返回一個(gè)方法,使用一個(gè)變量emits(變量名隨意)去接收,本文給大家介紹vue3 setup中defineEmits與defineProps的使用案例,感興趣的朋友一起看看吧2023-10-10Vue如何基于vue-i18n實(shí)現(xiàn)多國(guó)語(yǔ)言兼容
這篇文章主要介紹了Vue如何基于vue-i18n實(shí)現(xiàn)多國(guó)語(yǔ)言兼容,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07axios封裝,使用攔截器統(tǒng)一處理接口,超詳細(xì)的教程(推薦)
這篇文章主要介紹了axios封裝使用攔截器處理接口,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05Vue3.0中如何監(jiān)聽(tīng)props方法
這篇文章主要介紹了Vue3.0中如何監(jiān)聽(tīng)props方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue3.0中的雙向數(shù)據(jù)綁定方法及優(yōu)缺點(diǎn)
這篇文章主要介紹了vue3.0中的雙向數(shù)據(jù)綁定方法 ,文中通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08vue3編寫(xiě)組件的幾種實(shí)現(xiàn)方式
這篇文章主要介紹了vue3編寫(xiě)組件的幾種實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06Vue前端判斷數(shù)據(jù)對(duì)象是否為空的實(shí)例
這篇文章主要介紹了Vue前端判斷數(shù)據(jù)對(duì)象是否為空的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09