使用VUE的打印插件(vue-print-nb)出现多打印一个空白页的问题

解决vue-print-nb打印时多出一页空白,vue-print-nb打印有空白页 vue实现打印功能(vue-print-nb),解决vue-print-nb每次打印都会多出一张空白页,打印多一张空白 阅读详情

先说结论:html标签的高度如果设置为100%,打印div的高度设不设置都会多一个空白页。

       经过是这样的:

       最近同事写一个项目,但是遇到了一个问题,使用vue-print-nb打印时,预览中一定会出现两页,并且打印的div没有设置高度也没有设置margin。我创建一个新测试项目后发现新项目不会出现两页的情况,一度怀疑是不是被什么插件影响到了。

       后来商量以后同事提出可能是继承了父高度,于是我把原项目涉及打印div的父高度的css全都复制了过来,果然出现两页了,问题找到了,解决办法就好说了,一个一个往外删除,后来发现body跟#app的高度都不会影响打印的页数,但是html的高度如果设置为100%就会出现打印两页的情况。

       第一次使用碰到的坑,感觉还是记录一下比较好。

Vue3使用vue-print-nb插件调起打印功能 添加打印位置,绑定id。 阅读详情

相关推荐

vue3实现区域打印功能(vue3-print-nb)

前端使用vue3-print-nb插件来区域打印,实现指哪打哪!

Ghmin的博客 1万+

python教程(四)之字典(3.字典格式)

这个标题的理解应该是用字符串格式的方法设置字典 a={"bob":"friend","charly":"friend","herry":"normal","hermione":"girlfriend"} print("hermione is my {hermione}".format_map(a)) #hermione is my girlfriend #format_map是字典特有的格式设置方法,非常便利,下面再来一个例子 b=''' <html> <head> &

由浅入深? 559

vue打印模版-自定义模版-局部打印/使用插件vue-print-nb打印,打印样式设置

vue打印模版-自定义模版-局部打印/使用插件vue-print-nb打印,设置打印样式

qq_36821274的博客 2万+

vue-print-nb打印预览时多一张空白页

vue打印多出空白页

weixin_42234899的博客 2958

vue-print-nb 解决 vue 打印问题,并且隐藏页眉页脚

1、通过 npm 安装 vue-print-nb npm install vue-print-nb --save 2、挂载到 Vue 上 ​import Print from 'vue-print-nb' Vue.use(Print) 3、配置打印对象 <div id="main"> 这里是要打印的东西 </div> <!-- 打印按钮,通过 v-print 调用打印事件 --> <button v-print="printObj">打印&lt

Insist_bin的博客 1万+

关于vue-print-nb插件打印没有样式问题

最近项目中使用打印功能,使用vue-print-nb最后打印没有样式,刚开始以为是不支持css预处理(scss、stylus),结果发现不是这个问题,真正原因是: 下边是需要打印的div,在写css样式的时候,这个div不可以让父级给包裹(也就是不可以有别的父级包裹这个div),且父级不可以有样式!!! 、 打印时候没样式多数是这个问题!!! ...

记录点滴 1万+

vue前端打印代码加遇到的问题

vue前端打印,打印预览时多一张空白页,希望在打印时显示 id="printContent" 的内容,但在组件引用时隐藏它,vue-print-nb,vue-print-nb-jeecg

anwenagululu的博客 1291

vue中使用vue-print-nb实现打印功能

vue中使用vue-print-nb实现打印功能 安装: npm install vue-print-nb --save 在main.js中引入: import Print from 'vue-print-nb' Vue.use(Print); 在页面中使用: <div id="printTest">打印的内容</div> <el-button v-print="'#printTest'">打印</el-button> ...

weixin_45991470的博客 3029

VUE ---- 利用vue-print-nb实现打印功能

VUE ---- 利用vue-print-nb实现打印功能 一、安装vue-print-nb 二、引入Vue项目 三、使用说明

LizequaNNN的博客 3万+

从外包到转正:一个华为OD亲历者的真实工作体验与避坑指南

本文分享了一位华为OD员工从外包到转正的真实经历与实用建议。通过详细解析华为OD的日常工作、转正核心指标、机试备考技巧及职场突围策略,为读者提供了一份全面的避坑指南。特别针对机试E卷的高频考点和刷题方法,给出了具体的数据分析和实战经验。

weixin_33686714的博客 699

保姆级教程:用SNAP处理哨兵一号数据,5步搞定城区范围提取(附江西晋城案例)

本文提供了一份详细的保姆级教程,介绍如何使用SNAP软件处理哨兵一号数据,通过5个关键步骤快速提取城区范围。以江西晋城为例,教程涵盖数据准备、预处理、核心处理流程、自动化搭建及成果分析,帮助用户轻松掌握SNAP操作技巧,适用于城市规划、环境监测等领域。

weixin_32535389的博客 453

vue3使用vue3-print-nb打印;vue3直接触发打印窗口

vue3-print-nb 打印页面;vue页直接打印;vue直接触发打印;vue直接唤起打印弹窗

i_am_a_div的博客 1万+

Dify+firecrawl:一个超好用的网页转Markdown API,打造你的第一个能检索爬虫RAG知识库的聊天机器人

Firecrawl是一个超简单的API服务——你扔给它一个URL,它就能把整个网站(包括子页面!)的内容自动抓下来,并且转换成干净、易读的Markdown格式。不用配置网站的站点地图,不用写爬虫规则,API调一下,数据直接到手。接下来我们一起本地部署吧!

2501_91673550的博客 2991

vue-print-nb打印问题总结

1、如果打印出来,表格的列缺失 原因:table-layout: fixed导致的 让表table布局更加符合预期,普通使用table时,其table-layout默认值是auto,导致表格第二行和第一行不一样宽,也就是两行的宽度不对齐。而使用: table { table-layout: fixed; } 则会让表的布局以第一行为准,设置表格的宽度,然后其他行的表格宽度就按照第一行为准。一般表格第一行是表头标题,第二行以后是数据行,也就是让数据行的每列宽度向第一行列宽度看齐。...

q1424966670的博客 2万+

手把手教你解决Ubuntu 20.04虚拟机桥接模式下的网络问题:DHCP与静态IP配置全指南

本文详细解析了Ubuntu 20.04虚拟机在桥接模式下的网络配置问题,包括DHCP与静态IP的配置方法及常见故障排查技巧。通过深入讲解桥接模式原理和提供实战操作指南,帮助用户解决无法访问外网、ping不通等典型网络问题,实现虚拟机与物理网络的无缝连接。

weixin_29256771的博客 542

基于深度学习的水质预测:多参数监测与预测

首先,我们需要收集水质监测的多参数数据。收集到的数据应包括不同时间点的水质参数值以及相应的水质等级标签,用于训练和评估深度学习模型。同时,数据的质量和数量对于模型的性能也有重要影响,因此在实际应用中需要充分考虑数据的采集和处理过程。总之,基于深度学习的水质预测可以通过收集水质监测的多参数数据并使用适当的深度学习模型进行训练和预测来实现。通过以上的深度学习模型,我们可以利用水质监测的多参数数据进行水质预测。这种基于深度学习的方法可以提高水质预测的准确性和稳定性,为水质监测和环境保护提供有力支持。

web_bug407的博客 1103

vue插件——vue-print-nb 实现打印功能

vue插件——vue-print-nb 实现打印功能

yehaocheng520的博客 1万+

PCL 4PCS算法实现点云粗配准【2026最新版】

博客长期更新,本文最新更新时间为:2026年5月11日。

点云侠的博客 30万+

vue-print-nb的使用与常见问题

vue-print-nb的使用;出现空白页;设置页眉页脚

tang31415926的博客 8374

11、牛转录组分析的实用生物信息学流程

本文详细介绍了一套实用的牛转录组分析生物信息学流程,涵盖从数据提取、基因组索引生成、读取比对到单样本表达分析及差异表达分析的完整步骤。使用Angus和Brahman牛的RNA-seq数据作为示例,介绍了HTSEQ、featureCounts和StringTie等工具在基因表达计数中的应用,并结合edgeR和limma进行差异表达分析。文中提供了详细的命令行与R代码示例,包含常见问题解答与关键注意事项,帮助研究人员高效、准确地完成转录组数据分析。

ios99的博客 111

【PyQt】使用PyQt6基于Scenedetect制作视频场景自动分割应用

通过详细介绍PySceneDetect的功能和应用,本文阐释了如何利用这一工具提高视频编辑的效率。我们讨论了安装方法、命令行使用示例以及如何在Python脚本中集成PySceneDetect。此外文章还涵盖了基于PyQt6的图形界面设计,通过多线程技术处理视频,保证界面的响应性,并通过实时反馈机制提升用户体验。无论是专业的视频制作团队还是个人爱好者,PySceneDetect都提供了一种可行的、效率高的场景检测工具,让视频编辑工作变得更加简单快捷。

Mr数据杨 962

使用那各VUE的打印功能(print.js)出现多打印一个空白页的问题

最近这段时间,用VUE写东西,有个打印功能。 百度了一下,铺天盖地的VUE打印的两种实现方法。 很感激这些千篇一律的帖子,虽然不知道他们是否真的用过,还是只是复制粘贴。 至少这些帖子告诉我,是有两个可以选择的,并且多看几篇帖子,总算把这两个打印方法,都试了一遍。 下面简单总结一下: 先说结论:请使用第二种方法,下载print.js到本地,然后放到项目中导入。原因后边说。 一、使用vue-print-nb方法 具体的使用这里就不详细说明了,因为网上真的太多太多了。千篇一律的。 在本地直接npm安装一下就好。按

岁末zzz的博客 3700

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

vue中打印多一页空白页

解决方法: 打印元素的margin-top为零就就好了

Misnice的博客 3331

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

优化vue-print-nb打印体验:彻底消除空白页的实战技巧

本文针对vue-print-nb插件打印时出现空白页的常见问题,提供了系统性的解决方案。核心在于通过创建打印专用CSS样式表,重置@page、html和body元素的高度与边距,并优化打印区域容器的样式,从而彻底消除因布局计算错误导致的额外空白页。文中包含详细的代码示例和浏览器调试技巧,帮助开发者快速定位并解决问题。

k6l7m8n9的博客 847

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

上一篇: 小程序自定义taber闪烁问题
下一篇: [vue]项目node版本不兼容踩坑
令狐义瑜
博客等级 码龄9年 1粉丝 11原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值