VUE如何利用vue-print-nb實現(xiàn)打印功能詳解
一、安裝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 | 局部打印有效,打印的文本類型 | String | HTML5/loose/strict | HTML5 |
extraHead | 局部打印有效,添加在打印區(qū)域的最頂端 | String | - | - |
extraCss | 局部打印有效,為打印區(qū)域提供Stylesheet樣式表 | String | - | - |
popTitle | 局部打印有效,編輯頁眉的標(biāo)題 | String | - | Document Title |
clickMounted | 全局有效,調(diào)用v-print綁定的按鈕點擊事件callback | Function | - | this.Object |
openCallback | 全局有效,調(diào)用打印時的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)簽,使用逗號分割 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的使用案例詳解
在父組件中定義String、Number、Boolean、Array、Object、Date、Function、Symbol這些類型的數(shù)據(jù),使用defineEmits會返回一個方法,使用一個變量emits(變量名隨意)去接收,本文給大家介紹vue3 setup中defineEmits與defineProps的使用案例,感興趣的朋友一起看看吧2023-10-10axios封裝,使用攔截器統(tǒng)一處理接口,超詳細(xì)的教程(推薦)
這篇文章主要介紹了axios封裝使用攔截器處理接口,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05vue3.0中的雙向數(shù)據(jù)綁定方法及優(yōu)缺點
這篇文章主要介紹了vue3.0中的雙向數(shù)據(jù)綁定方法 ,文中通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08