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