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級(jí)聯(lián)選擇器的getCheckedNodes使用方式
這篇文章主要介紹了vue級(jí)聯(lián)選擇器的getCheckedNodes使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue-lazyload圖片延遲加載插件的實(shí)例講解
下面小編就為大家分享一篇vue-lazyload圖片延遲加載插件的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
利用Vue Router實(shí)現(xiàn)單頁面應(yīng)用(SPA)的代碼示例
在當(dāng)今前端開發(fā)中,單頁面應(yīng)用（SPA）已成為一種主流的開發(fā)模式,它通過在用戶與網(wǎng)頁之間提供更流暢的交互體驗(yàn),來改變傳統(tǒng)多頁面應(yīng)用的思維,本文將詳細(xì)介紹如何利用 Vue.js 中的 Vue Router 來實(shí)現(xiàn)一個(gè)簡單的單頁面應(yīng)用,需要的朋友可以參考下2025-01-01
Vue實(shí)現(xiàn)拖放排序功能的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了Vue中實(shí)現(xiàn)拖放排序功能，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
vue中的render函數(shù),它返回的是一個(gè)虛擬節(jié)點(diǎn)vnode,也就是我們要渲染的節(jié)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue中render函數(shù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡易購物車頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
vue+element多選級(jí)聯(lián)選擇器自定義props使用詳解
這篇文章主要給大家介紹了關(guān)于vue+element多選級(jí)聯(lián)選擇器自定義props使用的相關(guān)資料,級(jí)聯(lián)選擇器展示的結(jié)果都是以數(shù)組的形式展示,也就是v-model綁定的結(jié)果,需要的朋友可以參考下2023-07-07
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用，這篇文章主要介紹了對(duì)Vue?Router的理解,需要的朋友可以參考下2022-11-11
解決vue一個(gè)頁面中復(fù)用同一個(gè)echarts組件的問題
這篇文章主要介紹了解決vue一個(gè)頁面中復(fù)用同一個(gè)echarts組件的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
v-distpicker地區(qū)選擇器組件使用實(shí)例詳解
代碼添加了一個(gè)vDistpickerHandle的事件處理函數(shù)對(duì)地區(qū)選擇器中的數(shù)據(jù)進(jìn)行處理,將數(shù)據(jù)存儲(chǔ)到form對(duì)象的相應(yīng)屬性中,方便數(shù)據(jù)提交,這篇文章主要介紹了v-distpicker地區(qū)選擇器組件使用,需要的朋友可以參考下2024-02-02