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