vue-print-nb只打印一頁解決方法示例
更新時間：2023年11月10日 09:22:04 作者：夏茗星
這篇文章主要為大家介紹了vue-print-nb只打印一頁解決方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>
vue-print-nb打印
經(jīng)我研究多天，因為我是從接口拿的數(shù)據(jù)，數(shù)據(jù)量會很多，但是vue-print-nb這個插件只打印了21條表格數(shù)據(jù)，又嘗試了print.js的方法，依舊不行，達(dá)不到我想要的效果，然后我繼續(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è)置成高度自適應(yīng)，全部數(shù)據(jù)都能打印出來了，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。。。。，困擾我多天的問題終于解決了
以上就是vue-print-nb只打印一頁解決方法示例的詳細(xì)內(nèi)容，更多關(guān)于vue-print-nb打印的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue級聯(lián)選擇器的getCheckedNodes使用方式
這篇文章主要介紹了vue級聯(lián)選擇器的getCheckedNodes使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
下面小編就為大家分享一篇vue-lazyload圖片延遲加載插件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
利用Vue Router實現(xiàn)單頁面應(yīng)用(SPA)的代碼示例
在當(dāng)今前端開發(fā)中,單頁面應(yīng)用（SPA）已成為一種主流的開發(fā)模式,它通過在用戶與網(wǎng)頁之間提供更流暢的交互體驗,來改變傳統(tǒng)多頁面應(yīng)用的思維,本文將詳細(xì)介紹如何利用 Vue.js 中的 Vue Router 來實現(xiàn)一個簡單的單頁面應(yīng)用,需要的朋友可以參考下2025-01-01
本文通過實例代碼給大家介紹了Vue中實現(xiàn)拖放排序功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
vue中的render函數(shù),它返回的是一個虛擬節(jié)點(diǎn)vnode,也就是我們要渲染的節(jié)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue中render函數(shù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡易購物車頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
vue+element多選級聯(lián)選擇器自定義props使用詳解
這篇文章主要給大家介紹了關(guān)于vue+element多選級聯(lián)選擇器自定義props使用的相關(guān)資料,級聯(lián)選擇器展示的結(jié)果都是以數(shù)組的形式展示,也就是v-model綁定的結(jié)果,需要的朋友可以參考下2023-07-07
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用，這篇文章主要介紹了對Vue?Router的理解,需要的朋友可以參考下2022-11-11
解決vue一個頁面中復(fù)用同一個echarts組件的問題
這篇文章主要介紹了解決vue一個頁面中復(fù)用同一個echarts組件的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
代碼添加了一個vDistpickerHandle的事件處理函數(shù)對地區(qū)選擇器中的數(shù)據(jù)進(jìn)行處理,將數(shù)據(jù)存儲到form對象的相應(yīng)屬性中,方便數(shù)據(jù)提交,這篇文章主要介紹了v-distpicker地區(qū)選擇器組件使用,需要的朋友可以參考下2024-02-02