vue打印插件vue-print-nb的實(shí)現(xiàn)代碼
1.引入插件npm install vue-print-nb --save
在main.js中引入
import Print from 'vue-print-nb'Vue.use(Print)
2.html代碼
<div class="box"> <div id="printTest" class="upTable"> <table> <tr> <td class="title" colspan="4">木材檢尺報(bào)告書</td> </tr> <tr> <td class="one">船名</td> <td style="width:190px">{{ goods.shipName }}</td> <td class="one">輸出國(guó)</td> <td>{{ goods.exportCountry }}</td> </tr> <tr> <td class="one">樹種</td> <td>{{ variety }}</td> <td class="one">委托方/貨主</td> <td>{{ goods.goodsMaster }}</td> </tr> <tr> <td class="one">申報(bào)材積</td> <td>{{ goods.declareWoodVolume }}立方米</td> <td class="one">申報(bào)數(shù)量</td> <td>{{ goods.declareNumber }}根</td> </tr> <tr> <td class="one">存放地點(diǎn)</td> <td>{{ goods.goodsYard }}</td> <td class="one">卸畢時(shí)間</td> <td v-if="goods.unloadTime">{{ goods.unloadTime.substring(0,10) }}</td> <td v-else /> </tr> <tr> <td class="one">檢驗(yàn)標(biāo)準(zhǔn)</td> <td colspan="3">GB/T 144-2013 國(guó)家標(biāo)準(zhǔn)</td> </tr> <tr> <td class="title2" colspan="4">檢驗(yàn)結(jié)果</td> </tr> </table> <table class="dataTable"> <tr> <td style="width:210px">垛位號(hào)</td> <td style="width:100px">長(zhǎng)度</td> <td style="width:100px">已檢整木</td> <td style="width:100px">材積</td> <td style="width:100px">斷木</td> <td style="width:0">未檢整木</td> </tr> <tr v-for="(item,index) in shortData" :key="index"> <td>{{ item.placeNumber }}</td> <td>{{ item.placeLength }}</td> <td>{{ item.zs }}</td> <td>{{ item.woodVolume }}</td> <td>{{ item.damagedWood }}</td> <td>{{ item.notCheckWood }}</td> </tr> <tr> <td style="width:210px">合計(jì)</td> <td style="width:100px" /> <td style="width:100px">{{ zsAll }}</td> <td style="width:100px">{{ woodVolumeAll }}</td> <td style="width:100px">{{ damagedWoodAll }}</td> <td style="width:0px">{{ notCheckWoodAll }}</td> </tr> </table> </div> <el-button v-print="'#printTest'" type="primary" style="margin-top:20px"> 打印 </el-button> </div>
3.js代碼
<script> export default { props: ['catList', 'goods'], data() { return { //和下邊 <style media="printTest"> 一起的作用是去掉頁(yè)眉頁(yè)腳、去掉多出空白頁(yè)的問題 printObj: { id: 'printTest', popTitle: '', ectraHead: '' }, shortData: [], variety: '', zsAll: 0, // 已檢整木 總數(shù) woodVolumeAll: 0, // 材積 damagedWoodAll: 0, // 斷木 notCheckWoodAll: 0, // 未檢整木 updateTime: '' } }, methods: { //這里的數(shù)據(jù)是在父頁(yè)面?zhèn)鱽淼? getvariety(variety, catList, goods) { this.variety = variety this.shortData = catListthis.goods = goods// 合計(jì) let zsAll = 0 let woodVolumeAll = 0 let damagedWoodAll = 0 let notCheckWoodAll = 0 this.shortData.map((item) => { zsAll += item.zs woodVolumeAll += item.woodVolume damagedWoodAll += item.damagedWood notCheckWoodAll += item.notCheckWood }) this.zsAll = zsAll this.woodVolumeAll = woodVolumeAll this.damagedWoodAll = damagedWoodAll this.notCheckWoodAll = notCheckWoodAll }, } } </script>
4.樣式
<style media="printTest"> @page { size: auto; margin: 3mm; } html { background-color: #ffffff; height: auto; margin: 0px; body { border: solid 1px #ffffff; margin: 10mm 15mm 10mm 15mm; </style> <style lang="less" scoped> .upTable{ width: 100%; height: 50%; margin-top: 10px; table{ width: 100%; border-collapse:collapse } td{ border: 1px solid #000; font-size: 18px; text-align: center; font-family: Source Han Sans CN; font-weight: 450; color: #000000; .title{ font-size: 20px; height: 50px; font-weight: 550; .one{ width: 20%; height: 40px; .title2{ height: 45px; .dataTable{ border-top: 0px solid #000000; td{ // border: 1px solid #000; font-size: 18px; text-align: center; font-family: Source Han Sans CN; font-weight: 450; color: #000000; padding: 5px 0; } } .el-button{ margin-right: 20px; margin-left: 20px; width: 100px; padding: 12px 0;
到此這篇關(guān)于vue打印插件vue-print-nb的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue打印插件vue-print-nb內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue彈窗的兩種實(shí)現(xiàn)方式實(shí)例詳解
這篇文章主要介紹了Vue彈窗的兩種實(shí)現(xiàn)方式,一種使用.sync修飾符另一種使用v-model,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08Vue+webpack項(xiàng)目配置便于維護(hù)的目錄結(jié)構(gòu)教程詳解
新建項(xiàng)目的時(shí)候創(chuàng)建合理的目錄結(jié)構(gòu)便于后期的維護(hù)是很重要。這篇文章主要介紹了Vue+webpack項(xiàng)目配置便于維護(hù)的目錄結(jié)構(gòu) ,需要的朋友可以參考下2018-10-10解決webpack+Vue引入iView找不到字體文件的問題
今天小編就為大家分享一篇解決webpack+Vue引入iView找不到字體文件的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09利用vue組件自定義v-model實(shí)現(xiàn)一個(gè)Tab組件方法示例
這篇文章主要給大家介紹了關(guān)于利用vue組件自定義v-model實(shí)現(xiàn)一個(gè)Tab組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12解決vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)問題
這篇文章主要介紹了vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)的問題,本文通過實(shí)例結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-05-05