vue-print-nb只打印一頁解決方法示例
更新時間：2023年11月10日 09:22:04 作者：夏茗星
這篇文章主要為大家介紹了vue-print-nb只打印一頁解決方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪<BR>
vue-print-nb打印
經(jīng)我研究多天，因為我是從接口拿的數(shù)據(jù)，數(shù)據(jù)量會很多，但是vue-print-nb這個插件只打印了21條表格數(shù)據(jù)，又嘗試了print.js的方法，依舊不行，達不到我想要的效果，然后我繼續(xù)研究了vue-print-nb這個打印方法。。。
第一步：vue項目得下個依賴包
命令是
npm install vue-print-nb --save
下載依賴成功后
第二步：全局引入，或者局部引入
//全局引入在main.js文件里 import Print from 'vue-print-nb' Vue.use(Print) //局部引入是在組件里 import Print from 'vue-print-nb'
同時自定義一個指令
directives: {
Print
},
第三步： 使用
給你打印的內(nèi)容加上一個id,例如打印表格就是
<template>
<v-simple-table id="printTable">
<template v-slot:default>
<thead>
<tr>
<th class="text-left">
Name
</th>
<th class="text-left">
Calories
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.name"
>
<td>{{ item.name }}</td>
<td>{{ item.calories }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</template>打印的按鈕
<v-btn depressed primary v-print="printObj">{{打印}}</v-btn>data()里面定義打印的方法（注：是在data里面，不是methods）
printObj: {
id: 'printTable',
// extraCss: 'https://www.google.com,https://www.google.com'
// extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
},第四步： 最最最最關(guān)鍵的一步，也就是解決只能打印一頁的問題，就調(diào)整樣式
@media print {
@page {
size: auto;
}
body, html,div{
height: auto!important;
}
}
</style>這個div啊設置成高度自適應，全部數(shù)據(jù)都能打印出來了，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。。。。，困擾我多天的問題終于解決了
以上就是vue-print-nb只打印一頁解決方法示例的詳細內(nèi)容，更多關(guān)于vue-print-nb打印的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
基于vue-element組件實現(xiàn)音樂播放器功能
這篇文章主要介紹了基于vue-element組件實現(xiàn)音樂播放器功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了Vue之監(jiān)聽方法案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue-router路由懶加載及實現(xiàn)方式,路由懶加載的主要作用是將?路由對應的組件打包成一個個的js代碼塊，只有在這個路由被訪問到的時候，才會加載對應組件的代碼塊，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了element的el-table中記錄滾動條位置的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了詳解Vue源碼學習之callHook鉤子函數(shù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家詳細介紹了如何使用Java獲取客戶端信息以及IP地址,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02
本文主要介紹了vue3 reactive重新賦值的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-11-11
Vue.js頁面中有多個input搜索框如何實現(xiàn)防抖操作
debounce是lodash工具庫中的一個非常好用的函數(shù)。這篇文章主要介紹了Vue.js頁面中有多個input搜索框如何實現(xiàn)防抖操作,需要的朋友可以參考下2019-11-11
在前端開發(fā)中,列表的虛擬滾動是一種常見的優(yōu)化手段,可以大大提升頁面性能,在Vue3中,我們可以通過一些技巧來實現(xiàn)列表的虛擬滾動,本文將介紹如何使用Vue3實現(xiàn)列表的虛擬滾動,讓你的頁面加載更快、更流暢,需要的朋友可以參考下2024-09-09
Vue2實現(xiàn)Office文檔(docx、xlsx、pdf)在線預覽功能
在現(xiàn)代的Web應用開發(fā)中,實現(xiàn)Office文檔（如docx、xlsx、pdf）的在線預覽功能是一個常見的需求,下面小編就來和大家詳細介紹一下如何使用vue2實現(xiàn)這一功能吧2025-05-05