Vue中使用v-print打印出現(xiàn)空白頁問題及解決

更新時間：2023年09月21日 14:26:23 作者：JonTang

這篇文章主要介紹了Vue中使用v-print打印出現(xiàn)空白頁問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Vue使用v-print打印出現(xiàn)空白頁

最近做項(xiàng)目時遇到打印出現(xiàn)空白頁的問題，查閱資料后找到解決辦法，方便同行們快速解決問題。

1.解決辦法

在css中加入 "body{ height:auto; }" 即可解決問題。

更新~

第一種辦法雖然能夠解決問題，但是會修改整個頁面的body，會影響到所有的頁面，方法不可取，所以這里給出第二個解決辦法。

2.解決辦法

刪掉需要打印的內(nèi)容中最上面的<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 = "打印的標(biāo)題";
? ? ? ? ??? ?}

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3實(shí)現(xiàn)圖片縮放拖拽功能的示例代碼
v3-drag-zoom 是基于 vue3 開發(fā)的一個縮放拖拽組件,方便開發(fā)者快速實(shí)現(xiàn)縮放拖拽功能,效果類似地圖的縮放與拖拽,本文給大家介紹了vue3如何快速實(shí)現(xiàn)圖片縮放拖拽功能,感興趣的朋友可以參考下
2024-04-04
Vue-cli打包后部署到子目錄下的路徑問題說明
這篇文章主要介紹了Vue-cli打包后部署到子目錄下的路徑問題說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue3組件的v-model:value與v-model的區(qū)別解析
在Vue3中,v-model和v-model:value都是用于實(shí)現(xiàn)雙向數(shù)據(jù)綁定的語法糖,但v-model:value提供了更顯式和靈活的綁定方式,允許你明確指定綁定的屬性名和事件名,它們的主要區(qū)別在于默認(rèn)行為、靈活性、多模型綁定和使用場景,感興趣的朋友一起看看吧
2025-02-02
Vue 前端實(shí)現(xiàn)登陸攔截及axios 攔截器的使用
這篇文章主要介紹了Vue 前端實(shí)現(xiàn)登陸攔截及axios 攔截器的使用,通過這個項(xiàng)目學(xué)習(xí)如何實(shí)現(xiàn)一個前端項(xiàng)目中所需要的登錄及攔截、登出、token失效的攔截及對應(yīng) axios 攔截器的使用。需要的朋友可以參考下
2019-07-07
Vue3中v-slot的特性深度剖析
在Vue3架構(gòu)里,v-slot 作為作用域插槽的關(guān)鍵支撐,重塑了父子組件間數(shù)據(jù)與方法傳遞的范式,本文主要來和大家剖析一下v-slot的相關(guān)特性,需要的可以了解下
2025-01-01
利用Vue實(shí)現(xiàn)移動端圖片輪播組件的方法實(shí)例
輪播圖是前端很常用的一個網(wǎng)頁特效，幾乎所有的網(wǎng)站或多或少都會用到這個特效。下面這篇文章主要給大家介紹了關(guān)于利用Vue實(shí)現(xiàn)移動端圖片輪播組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。
2017-08-08
ES6 Proxy實(shí)現(xiàn)Vue的變化檢測問題
Vue3.0將采用ES6 Proxy的形式重新實(shí)現(xiàn)Vue的變化檢測，在官方還沒給出新方法之前，我們先實(shí)現(xiàn)一個基于Proxy的變化檢測。感興趣的朋友跟隨小編一起看看吧
2019-06-06
Vue+element-ui 實(shí)現(xiàn)表格的分頁功能示例
這篇文章主要介紹了Vue+element-ui 實(shí)現(xiàn)表格的分頁功能示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
vue-mounted中如何處理data數(shù)據(jù)
這篇文章主要介紹了vue-mounted中如何處理data數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
詳解axios 全攻略之基本介紹與使用（GET 與 POST）
本篇文章主要介紹了axios 全攻略之基本介紹與使用（GET 與 POST），詳細(xì)的介紹了axios的安裝和使用，還有 GET 與 POST方法，有興趣的可以了解一下
2017-09-09