Vue中使用v-print打印出現(xiàn)空白頁(yè)問題及解決
更新時(shí)間：2023年09月21日 14:26:23 作者：JonTang
這篇文章主要介紹了Vue中使用v-print打印出現(xiàn)空白頁(yè)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue使用v-print打印出現(xiàn)空白頁(yè)
最近做項(xiàng)目時(shí)遇到打印出現(xiàn)空白頁(yè)的問題，查閱資料后找到解決辦法，方便同行們快速解決問題。
1.解決辦法
在css中加入 "body{ height:auto; }" 即可解決問題。
更新~
第一種辦法雖然能夠解決問題，但是會(huì)修改整個(gè)頁(yè)面的body，會(huì)影響到所有的頁(yè)面，方法不可取，所以這里給出第二個(gè)解決辦法。
2.解決辦法
刪掉需要打印的內(nèi)容中最上面的<div>樣式中的"margin-top:xxx"即可解決問題。
Vue v-print打印文件
下載安裝插件
npm install vue-print-nb --save
引入注冊(cè)
在app.js或main.js中引入
?? ?//打印文件 ?? ?import Print from 'vue-print-nb' ?? ?Vue.use(Print)
使用
HTML 部分
?? ?<div id="single-info"> ? ? ? ? <el-form ?label-width="160px"> ? ? ? ? ? ?<el-row align="center" style="margin-top:30px;"> ? ? ? ? ? ? ? ? <el-col :span="24" align="center"> ? ? ? ? ? ? ? ? ? ?<el-button id="info-btn" v-print="'#single-info'" ?@click="prints">打印</el-button> ? ? ? ? ? ? ? ?</el-col> ? ? ? ? ? ?</el-row> ? ? ? ?</el-form> ? ? </div>
JS 部分
?? ??? ??? ?prints(){
? ? ? ? ? ? ? var prints = document.getElementById('single-info');
? ? ? ? ? ? ? prints.title = "打印的標(biāo)題";
? ? ? ? ??? ?}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中的el-tree @node-click傳自定義參數(shù)
這篇文章主要介紹了vue中的el-tree @node-click傳自定義參數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue router使用query和params傳參的使用和區(qū)別
本篇文章主要介紹了vue router使用query和params傳參的使用和區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-11-11
這篇文章主要為大家介紹了axios接口管理優(yōu)化操作詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Element-UI Table組件上添加列拖拽效果實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Element-UI Table組件上添加列拖拽效果的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
這篇文章主要介紹了vue中eslintrc.js配置最詳細(xì)介紹，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-12-12
詳解mpvue中使用vant時(shí)需要注意的onChange事件的坑
這篇文章主要介紹了詳解mpvue中使用vant時(shí)需要注意的onChange事件的坑，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-05-05
Vue項(xiàng)目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)
日常業(yè)務(wù)中路由跳轉(zhuǎn)的同時(shí)傳遞參數(shù)是比較常見的,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
Vue?echarts實(shí)例項(xiàng)目商家銷量統(tǒng)計(jì)圖實(shí)現(xiàn)詳解
Echarts，它是一個(gè)與框架無(wú)關(guān)的?JS?圖表庫(kù)，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計(jì)IONIC也能用，因?yàn)槲业牧?xí)慣，每次新嘗試做一個(gè)功能的時(shí)候，總要新創(chuàng)建個(gè)小項(xiàng)目，做做Demo2022-09-09
使用Vue3和ApexCharts實(shí)現(xiàn)3D徑向條形圖的代碼
徑向條形圖是一種用于可視化單一數(shù)據(jù)點(diǎn)及其與目標(biāo)或理想值的關(guān)系的圖表類型,它在顯示進(jìn)度、完成率或其他類似度量時(shí)非常有用,本文給大家介紹了使用Vue3和ApexCharts實(shí)現(xiàn)3D徑向條形圖,感興趣的小伙伴可以參考閱讀下2024-06-06
vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定
這篇文章主要為大家詳細(xì)介紹了vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定，幫大家解析神秘的Object.defineProperty方法2017-03-03