vue-print-nb只打印一頁解決方法示例
vue-print-nb打印
經(jīng)我研究多天，因?yàn)槲沂菑慕涌谀玫臄?shù)據(jù)，數(shù)據(jù)量會(huì)很多，但是vue-print-nb這個(gè)插件只打印了21條表格數(shù)據(jù)，又嘗試了print.js的方法，依舊不行，達(dá)不到我想要的效果，然后我繼續(xù)研究了vue-print-nb這個(gè)打印方法。。。
第一步：vue項(xiàng)目得下個(gè)依賴包
命令是
npm install vue-print-nb --save
下載依賴成功后
第二步：全局引入，或者局部引入
//全局引入在main.js文件里 import Print from 'vue-print-nb' Vue.use(Print) //局部引入是在組件里 import Print from 'vue-print-nb'
同時(shí)自定義一個(gè)指令
directives: {
Print
},
第三步： 使用
給你打印的內(nèi)容加上一個(gè)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>這個(gè)div啊設(shè)置成高度自適應(yīng)，全部數(shù)據(jù)都能打印出來了，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。。。。，困擾我多天的問題終于解決了
以上就是vue-print-nb只打印一頁解決方法示例的詳細(xì)內(nèi)容，更多關(guān)于vue-print-nb打印的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
基于vue-element組件實(shí)現(xiàn)音樂播放器功能
這篇文章主要介紹了基于vue-element組件實(shí)現(xiàn)音樂播放器功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了Vue之監(jiān)聽方法案例詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue-router路由懶加載及實(shí)現(xiàn)方式,路由懶加載的主要作用是將?路由對(duì)應(yīng)的組件打包成一個(gè)個(gè)的js代碼塊，只有在這個(gè)路由被訪問到的時(shí)候，才會(huì)加載對(duì)應(yīng)組件的代碼塊，需要的朋友可以參考下2022-12-12
element的el-table中記錄滾動(dòng)條位置的示例代碼
這篇文章主要介紹了element的el-table中記錄滾動(dòng)條位置的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
詳解Vue源碼學(xué)習(xí)之callHook鉤子函數(shù)
這篇文章主要介紹了詳解Vue源碼學(xué)習(xí)之callHook鉤子函數(shù)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家詳細(xì)介紹了如何使用Java獲取客戶端信息以及IP地址,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
本文主要介紹了vue3 reactive重新賦值的問題解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-11-11
Vue.js頁面中有多個(gè)input搜索框如何實(shí)現(xiàn)防抖操作
debounce是lodash工具庫中的一個(gè)非常好用的函數(shù)。這篇文章主要介紹了Vue.js頁面中有多個(gè)input搜索框如何實(shí)現(xiàn)防抖操作,需要的朋友可以參考下2019-11-11
使用Vue3實(shí)現(xiàn)列表虛擬滾動(dòng)的詳細(xì)步驟
在前端開發(fā)中,列表的虛擬滾動(dòng)是一種常見的優(yōu)化手段,可以大大提升頁面性能,在Vue3中,我們可以通過一些技巧來實(shí)現(xiàn)列表的虛擬滾動(dòng),本文將介紹如何使用Vue3實(shí)現(xiàn)列表的虛擬滾動(dòng),讓你的頁面加載更快、更流暢,需要的朋友可以參考下2024-09-09
Vue2實(shí)現(xiàn)Office文檔(docx、xlsx、pdf)在線預(yù)覽功能
在現(xiàn)代的Web應(yīng)用開發(fā)中,實(shí)現(xiàn)Office文檔（如docx、xlsx、pdf）的在線預(yù)覽功能是一個(gè)常見的需求,下面小編就來和大家詳細(xì)介紹一下如何使用vue2實(shí)現(xiàn)這一功能吧2025-05-05