vue中的vue-print-nb如何實(shí)現(xiàn)頁(yè)面打印
更新時(shí)間：2022年04月21日 10:45:06 作者：今天代碼敲了嗎
這篇文章主要介紹了vue中的vue-print-nb如何實(shí)現(xiàn)頁(yè)面打印，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
安裝
npm install vue-print-nb --save
在main.js中全局引入
import Print from 'vue-print-nb' Vue.use(Print);
頁(yè)面中使用
備注：只會(huì)打印id=printMe內(nèi)的網(wǎng)頁(yè)
<template>
? <div class="table">
? ? <div class="tableList">
? ? ? <div id="printMe">
? ? ? ? <div class="title">打印模板</div>
? ? ? ? <div class="content-table-three">
? ? ? ? ? <div class="table-name-three">XXXX</div>
? ? ? ? ? <div class="table-info-three">{{ list.fromName }}</div>
? ? ? ? ? <div class="table-name-three">XXXX</div>
? ? ? ? ? <div class="table-info-three">{{ list.fromIdCard }}</div>
? ? ? ? ? <div class="table-name-three">XXXX</div>
? ? ? ? ? <div class="table-info-three">{{ list.fromPhone }}</div>
? ? ? ? </div>
? ? ? ? <div class="content-table-three">
? ? ? ? ? <div class="table-name-three">XXXX</div>
? ? ? ? ? <div class="table-info-three">{{ list.fromName }}</div>
? ? ? ? ? <div class="table-name-three"XXXX</div>
? ? ? ? ? <div class="table-info-three">{{ list.fromIdCard }}</div>
? ? ? ? ? <div class="table-name-three">XXXX</div>
? ? ? ? ? <div class="table-info-three">{{ list.fromPhone }}</div>
? ? ? ? </div>
? ? ? ? <div class="content-table-two">
? ? ? ? ? <div class="table-name-two">XXXX</div>
? ? ? ? ? <div class="table-info-two">{{ list.reason }}</div>
? ? ? ? ? <div class="table-name-two">XXXX</div>
? ? ? ? ? <div class="table-info-two">{{ list.reason }}</div>
? ? ? ? </div>
? ? ? ? <div class="content-table-one">
? ? ? ? ? <div class="table-name-one">XXXX</div>
? ? ? ? ? <div class="table-info-one">{{ list.reason }}</div>
? ? ? ? </div>
? ? ? ? <div class="content-table-one">
? ? ? ? ? <div class="table-name-one">XXXX</div>
? ? ? ? ? <div class="table-info-one">{{ list.reason }}</div>
? ? ? ? </div>
? ? ? ? <div class="content-table-img">
? ? ? ? ? <div class="table-name-one">XXXX</div>
? ? ? ? ? <div class="table-info-img">
? ? ? ? ? ? <div class="imgsrc">
? ? ? ? ? ? ? <img
? ? ? ? ? ? ? ? v-if="list.img"
? ? ? ? ? ? ? ? :src="list.img"
? ? ? ? ? ? ? />
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="content-table-img">
? ? ? ? ? <div class="table-name-one">XXXX</div>
? ? ? ? ? <div class="table-info-img">
? ? ? ? ? ? <div class="imgsrc">
? ? ? ? ? ? ? <img
? ? ? ? ? ? ? ? v-if="list.img"
? ? ? ? ? ? ? ? :src="list.img"
? ? ? ? ? ? ? />
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? ? <div ?class="table-btn">
? ? ? ? <Button type="info" v-print="printObj" class="btn-no">打印</Button>
? ? ? </div>
? ? </div>
? </div>
</template><script>
export default {
? name: "printInfo",
? data() {
? ? return {
? ? ? list:[],
? ? ? printObj: {
? ? ? ? id: "printMe",
? ? ? ? popTitle: "打印模板",
? ? ? ? extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
? ? ? },
? ? };
? },
? methods: {},
? computed: {},
? created() { },
};
</script><style ? scoped>
.table {
? width: 100%;
? height: 100vh;
? overflow-y: scroll;
}
.tableList {
? width: 900px;
? margin: auto;
? margin-top: 20px;
}
.title {
? font-size: 20px;
? width: 100%;
? text-align: center;
}
.table-name-three,
.table-info-three {
? border: 0.55px solid;
? width: 16.7%;
}
.table-name-two,
.table-info-two {
? border: 0.55px solid;
? width: 25%;
? line-height: 100px;
? text-align: center;
}
.table-info-img {
? border: 0.55px solid;
? width: 75%;
}
.table-info-one {
? border: 0.55px solid;
? width: 75%;
}
.table-name-one {
? border: 0.55px solid;
? width: 25%;
}
.content-table-one,
.content-table-two,
.content-table-three {
? display: flex;
? height: 100px;
? width: 100%;
? line-height: 100px;
? text-align: center;
}
.content-table-img {
? display: flex;
? height: 100px;
? width: 100%;
? line-height: 100px;
? text-align: center;
}
img {
? max-width: 100%;
? height: 100%;
? background-size: 100%;
? background-repeat: no-repeat;
}
.imgsrc {
? width: 90%;
? margin: auto;
? height: 90%;
? margin-top: 5px;
}
.table-btn {
? margin-top: 20px;
? display: flex;
? justify-content: space-evenly;
? align-items: center;
? align-content: center;
}
</style>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)模糊查詢的簡(jiǎn)單示例
在Vue中實(shí)現(xiàn)模糊查詢,你可以使用JavaScript的filter和includes方法,結(jié)合Vue的v-for指令,本文給大家舉了一個(gè)簡(jiǎn)單的示例,并通過(guò)代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
利用vue3仿蘋(píng)果系統(tǒng)側(cè)邊消息提示效果實(shí)例
這篇文章主要給大家介紹了關(guān)于如何利用vue3仿蘋(píng)果系統(tǒng)側(cè)邊消息提示效果的相關(guān)資料,文中通過(guò)實(shí)例代碼以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-12-12
給vue項(xiàng)目添加ESLint的詳細(xì)步驟
本篇文章主要介紹了給vue項(xiàng)目添加ESLint的詳細(xì)步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)的具體用法（路由守衛(wèi)）
這篇文章主要介紹了vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)的具體用法（路由守衛(wèi)），vue-route 提供的 beforeRouteUpdate 可以方便地實(shí)現(xiàn)導(dǎo)航守衛(wèi)（navigation-guards），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
uniapp項(xiàng)目國(guó)際化標(biāo)準(zhǔn)的配置與實(shí)現(xiàn)
UniApp是一種基于Vue.js的跨平臺(tái)開(kāi)發(fā)框架,可以快速地開(kāi)發(fā)同時(shí)運(yùn)行在多個(gè)平臺(tái)的應(yīng)用程序,這篇文章主要介紹了uniapp項(xiàng)目國(guó)際化標(biāo)準(zhǔn)的配置與實(shí)現(xiàn),需要的朋友可以參考下2023-11-11
使用Vue-axios進(jìn)行數(shù)據(jù)交互的方法
這篇文章主要介紹了使用Vue-axios進(jìn)行數(shù)據(jù)交互詳情，文章圍繞Vue-axios進(jìn)行數(shù)據(jù)交互的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)或工作有所幫助2022-03-03
在Vue應(yīng)用中，通常需要將一些狀態(tài)進(jìn)行持久化，以便在用戶關(guān)閉瀏覽器或刷新頁(yè)面后，常見(jiàn)的方法就是LocalStorage和SessionStorage，所以本文就來(lái)講講這兩種方法的具體實(shí)現(xiàn)吧2023-06-06
Vue.js是當(dāng)下很火的一個(gè)JavaScript MVVM（Model-View-ViewModel）庫(kù).這篇文章主要介紹了基于vue.js快速搭建圖書(shū)管理平臺(tái) ,需要的朋友可以參考下2017-10-10
vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問(wèn)題
這篇文章主要介紹了vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue清除定時(shí)器setInterval優(yōu)化方案分享
這篇文章主要介紹了Vue清除定時(shí)器setInterval優(yōu)化方案分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07