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 = "打印的标题";
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
v3-drag-zoom 是基于 vue3 开发的一个缩放拖拽组件,方便开发者快速实现缩放拖拽功能,效果类似地图的缩放与拖拽,本文给大家介绍了vue3如何快速实现图片缩放拖拽功能,感兴趣的朋友可以参考下2024-04-04
这篇文章主要介绍了Vue-cli打包后部署到子目录下的路径问题说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
vue3组件的v-model:value与v-model的区别解析
在Vue3中,v-model和v-model:value都是用于实现双向数据绑定的语法糖,但v-model:value提供了更显式和灵活的绑定方式,允许你明确指定绑定的属性名和事件名,它们的主要区别在于默认行为、灵活性、多模型绑定和使用场景,感兴趣的朋友一起看看吧2025-02-02
这篇文章主要介绍了Vue 前端实现登陆拦截及axios 拦截器的使用,通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截、登出、token失效的拦截及对应 axios 拦截器的使用。需要的朋友可以参考下2019-07-07
在Vue3架构里,v-slot 作为作用域插槽的关键支撑,重塑了父子组件间数据与方法传递的范式,本文主要来和大家剖析一下v-slot的相关特性,需要的可以了解下2025-01-01
轮播图是前端很常用的一个网页特效，几乎所有的网站或多或少都会用到这个特效。下面这篇文章主要给大家介绍了关于利用Vue实现移动端图片轮播组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-08-08
Vue3.0将采用ES6 Proxy的形式重新实现Vue的变化检测，在官方还没给出新方法之前，我们先实现一个基于Proxy的变化检测。感兴趣的朋友跟随小编一起看看吧2019-06-06
这篇文章主要介绍了Vue+element-ui 实现表格的分页功能示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue-mounted中如何处理data数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
详解axios 全攻略之基本介绍与使用（GET 与 POST）
本篇文章主要介绍了axios 全攻略之基本介绍与使用（GET 与 POST），详细的介绍了axios的安装和使用，还有 GET 与 POST方法，有兴趣的可以了解一下2017-09-09
最新评论