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传参的使用和区别
本篇文章主要介绍了vue router使用query和params传参的使用和区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要为大家介绍了axios接口管理优化操作详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪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
日常业务中路由跳转的同时传递参数是比较常见的,下面这篇文章主要给大家介绍了关于Vue项目如何在js文件里获取路由参数及路由跳转的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
Echarts，它是一个与框架无关的 JS 图表库，但是它基于Js，这样很多框架都能使用它，例如Vue，估计IONIC也能用，因为我的习惯，每次新尝试做一个功能的时候，总要新创建个小项目，做做Demo2022-09-09
径向条形图是一种用于可视化单一数据点及其与目标或理想值的关系的图表类型,它在显示进度、完成率或其他类似度量时非常有用,本文给大家介绍了使用Vue3和ApexCharts实现3D径向条形图,感兴趣的小伙伴可以参考阅读下2024-06-06
vue.js利用Object.defineProperty实现双向绑定
这篇文章主要为大家详细介绍了vue.js利用Object.defineProperty实现双向绑定，帮大家解析神秘的Object.defineProperty方法2017-03-03
最新评论