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集成高德地图amap-jsapi-loader的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要介绍了Vue开发Html5微信公众号的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍了vue为什么要封装全局组件引入，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下2022-07-07
Prop的基本用法很简单，只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可。这篇文章主要介绍了Vue中的Prop ,需要的朋友可以参考下2018-06-06
这篇文章主要为大家介绍了Vue插槽解决父子组件通信，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
vue大文件分片上传之simple-uploader.js的使用
本文主要介绍了vue大文件分片上传之simple-uploader.js的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
今天小编就为大家分享一篇vue实现路由监听和参数监听，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
解决vue.js this.$router.push无效的问题
今天小编就为大家分享一篇解决vue.js this.$router.push无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue中data数据之间如何赋值问题，具有很好的参考价值，希望对大家有所帮助。2022-09-09
Echarts 、 Remodal和Pikaday是我们在开发后台管理类网站时常用的三个第三方组件，下面这篇文章主要给大家介绍了关于vue.js如何将echarts封装为组件一键使用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-10-10
最新评论