vue3-print-nb實(shí)現(xiàn)頁(yè)面打印(含分頁(yè)打印)示例代碼
更新時(shí)間：2024年01月22日 15:08:44 作者：氣乃本
大多數(shù)后臺(tái)系統(tǒng)中都存在打印的需求,在有打印需求時(shí),對(duì)前端來(lái)說(shuō)當(dāng)然是直接打印頁(yè)面更容易,下面這篇文章主要給大家介紹了關(guān)于vue3-print-nb實(shí)現(xiàn)頁(yè)面打印(含分頁(yè)打印)的相關(guān)資料,需要的朋友可以參考下
安裝vue3-print-nb
npm install vue3-print-nb --save
引用vue3-print-nb
全局引入
// 全局引用
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')局部引入
// 單組件引用
import print from 'vue3-print-nb'
// 在自定義指令中注冊(cè)
directives: {
print
}API
官網(wǎng)地址：https://github.com/Power-kxLee/vue3-print-nb
官網(wǎng)有詳細(xì)介紹
示例代碼
全頁(yè)面打印
<button v-print>打印整個(gè)頁(yè)面</button>
局部打印
被打印的區(qū)域需要被渲染出來(lái)，隱藏的元素不能打印
<div id="a">
<p>打印我吧</p>
<p>打印我吧</p>
<p>打印我吧</p>
</div>
//寫法一
<button v-print="#a">局部打印</button>
//寫法二(可以接受對(duì)象)
<button v-print="{id:a}">局部打印</button>分頁(yè)打印
<template>
<div>
<button v-print="'#a'">打印</button>
<div id="a">
// 方法一
// 使用div包裹需要分頁(yè)的塊 使用 css屬性 page-break-after:always進(jìn)行分頁(yè)
<div style="page-break-after:always">第一頁(yè)</div>
<div style="page-break-after:always">第二頁(yè)</div>
</div>
</div>
</template>
<style>
// 方法二
// 使用媒體查詢 在打印時(shí)設(shè)置 body 和 html 的高度為auto
@media print {
@page {
size: auto;
}
body, html { //如果vue最外層id，默認(rèn)是#app。如果設(shè)置了height:100%;，那么#app也加
height: auto !important;
}
}
</style>總結(jié)
到此這篇關(guān)于vue3-print-nb實(shí)現(xiàn)頁(yè)面打印(含分頁(yè)打印)的文章就介紹到這了,更多相關(guān)vue3-print-nb實(shí)現(xiàn)頁(yè)面打印內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于在Vue項(xiàng)目中使用mock.js的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能(完整代碼)
最近在開發(fā)移動(dòng)端項(xiàng)目，通過(guò)向左滑動(dòng)出現(xiàn)刪除按鈕，點(diǎn)擊即可刪除，怎么實(shí)現(xiàn)這個(gè)功能呢，接下來(lái)小編給大家?guī)?lái)實(shí)例代碼幫助大家學(xué)習(xí)vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能，感興趣的朋友跟隨小編一起看看吧2021-05-05
flutter使用tauri實(shí)現(xiàn)一個(gè)一鍵視頻轉(zhuǎn)4K軟件
這篇文章主要為大家介紹了flutter使用tauri實(shí)現(xiàn)一個(gè)一鍵視頻轉(zhuǎn)4K軟件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
使用element-ui +Vue 解決 table 里包含表單驗(yàn)證的問(wèn)題
這篇文章主要介紹了使用element-ui +Vue 解決 table 里包含表單驗(yàn)證的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue實(shí)戰(zhàn)之vue登錄驗(yàn)證的實(shí)現(xiàn)代碼
本篇文章主要介紹了Vue實(shí)戰(zhàn)之vue登錄的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
今天小編就為大家分享一篇vue2過(guò)濾器模糊查詢方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue+vant實(shí)現(xiàn)購(gòu)物車全選和反選功能
這篇文章主要為大家詳細(xì)介紹了vue+vant實(shí)現(xiàn)購(gòu)物車全選和反選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
Vue用v-for給循環(huán)標(biāo)簽自身屬性添加屬性值的方法
這篇文章主要介紹了Vue用v-for給循環(huán)標(biāo)簽自身屬性添加屬性值的方法，文中大家給大家列舉了三種方法 ,需要的朋友可以參考下2018-10-10
Vue使用watch監(jiān)聽一個(gè)對(duì)象中的屬性的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue使用watch監(jiān)聽一個(gè)對(duì)象中的屬性的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
這篇文章主要介紹了在Vue中使用Immutable.js的步驟，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09