欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年09月21日 14:26:23   作者：JonTang  
這篇文章主要介紹了Vue中使用v-print打印出現(xiàn)空白頁問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

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

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

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 = "打印的標題";
? ? ? ? ??? ?}

總結

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

相關文章

  • vue3實現(xiàn)圖片縮放拖拽功能的示例代碼

    vue3實現(xiàn)圖片縮放拖拽功能的示例代碼

    v3-drag-zoom 是基于 vue3 開發(fā)的一個縮放拖拽組件,方便開發(fā)者快速實現(xiàn)縮放拖拽功能,效果類似地圖的縮放與拖拽,本文給大家介紹了vue3如何快速實現(xiàn)圖片縮放拖拽功能,感興趣的朋友可以參考下
    2024-04-04
  • Vue-cli打包后部署到子目錄下的路徑問題說明

    Vue-cli打包后部署到子目錄下的路徑問題說明

    這篇文章主要介紹了Vue-cli打包后部署到子目錄下的路徑問題說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • vue3組件的v-model:value與v-model的區(qū)別解析

    vue3組件的v-model:value與v-model的區(qū)別解析

    在Vue3中,v-model和v-model:value都是用于實現(xiàn)雙向數(shù)據(jù)綁定的語法糖,但v-model:value提供了更顯式和靈活的綁定方式,允許你明確指定綁定的屬性名和事件名,它們的主要區(qū)別在于默認行為、靈活性、多模型綁定和使用場景,感興趣的朋友一起看看吧
    2025-02-02
  • Vue 前端實現(xiàn)登陸攔截及axios 攔截器的使用

    Vue 前端實現(xiàn)登陸攔截及axios 攔截器的使用

    這篇文章主要介紹了Vue 前端實現(xiàn)登陸攔截及axios 攔截器的使用,通過這個項目學習如何實現(xiàn)一個前端項目中所需要的 登錄及攔截、登出、token失效的攔截及對應 axios 攔截器的使用。需要的朋友可以參考下
    2019-07-07
  • Vue3中v-slot的特性深度剖析

    Vue3中v-slot的特性深度剖析

    在Vue3架構里,v-slot 作為作用域插槽的關鍵支撐,重塑了父子組件間數(shù)據(jù)與方法傳遞的范式,本文主要來和大家剖析一下v-slot的相關特性,需要的可以了解下
    2025-01-01
  • 利用Vue實現(xiàn)移動端圖片輪播組件的方法實例

    利用Vue實現(xiàn)移動端圖片輪播組件的方法實例

    輪播圖是前端很常用的一個網(wǎng)頁特效，幾乎所有的網(wǎng)站或多或少都會用到這個特效。下面這篇文章主要給大家介紹了關于利用Vue實現(xiàn)移動端圖片輪播組件的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。
    2017-08-08
  • ES6 Proxy實現(xiàn)Vue的變化檢測問題

    ES6 Proxy實現(xiàn)Vue的變化檢測問題

    Vue3.0將采用ES6 Proxy的形式重新實現(xiàn)Vue的變化檢測，在官方還沒給出新方法之前，我們先實現(xiàn)一個基于Proxy的變化檢測。感興趣的朋友跟隨小編一起看看吧
    2019-06-06
  • Vue+element-ui 實現(xiàn)表格的分頁功能示例

    Vue+element-ui 實現(xiàn)表格的分頁功能示例

    這篇文章主要介紹了Vue+element-ui 實現(xiàn)表格的分頁功能示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • vue-mounted中如何處理data數(shù)據(jù)

    vue-mounted中如何處理data數(shù)據(jù)

    這篇文章主要介紹了vue-mounted中如何處理data數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 詳解axios 全攻略之基本介紹與使用（GET 與 POST）

    詳解axios 全攻略之基本介紹與使用（GET 與 POST）

    本篇文章主要介紹了axios 全攻略之基本介紹與使用（GET 與 POST），詳細的介紹了axios的安裝和使用，還有 GET 與 POST方法，有興趣的可以了解一下
    2017-09-09

最新評論