Vue中使用v-print打印出现空白页

最新推荐文章于 2026-07-20 23:46:58 发布
原创 最新推荐文章于 2026-07-20 23:46:58 发布 · 4.3k 阅读 · 5 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
vue

当前文章被收录于：

vue
1 篇文章 0 人学习
订阅专栏 查看详情
本文介绍了两种解决打印空白页的方法，一种是在CSS中调整body高度，另一种是删除打印内容顶部div的margin-top属性，后者更推荐，避免了全局样式的影响。

本人最近做项目时遇到打印出现空白页的问题，查阅资料后找到解决办法，方便同行们快速解决问题。

1.解决办法：在css中加入 "body{ height:auto; }" 即可解决问题。

---------------------2020/5/28更新----------------------------------

第一种办法虽然能够解决问题，但是会修改整个页面的body，会影响到所有的页面，方法不可取，所以这里给出第二个解决办法。

2.解决办法：删掉需要打印的内容中最上面的<div>样式中的"margin-top:xxx"即可解决问题。

标签
#vue #js #css #html
vue+elementui v-print打印时预览的页面多一张空白页
dell_Luo的博客
04-16 1246
这是更改前的效果,多了一张空白页: 先贴一下打印的代码: 解决方法(新添加一个style): 主要内容: 将margin设置为0即可
vue2使用打印插件预览，el-form-item不正常显示
qq_38670879的博客
06-03 372
important;/* 调整字体大小 */加样式的时候需要使用::v-deep和important。// 控制打印预览时样式正常显示。
PyCharm激活码深度解析：合法获取、技术排坑与高效开发指南
chunchan1381的博客
06-15 387
在Python开发领域，集成开发环境（IDE）是提升编码效率的核心工具。PyCharm作为业界主流IDE，其专业版通过订阅制授权模型，为用户提供数据库集成、Web框架支持等高级功能。理解其激活机制，不仅关乎软件合法合规使用，更是保障开发环境稳定、持续获取安全更新的基础。对于开发者而言，掌握官方教育许可、开源项目许可等合规获取途径，能有效规避法律风险与安全漏洞。在实际应用中，常需解决PyCharm启动闪退、Python解释器配置等环境问题，例如通过调整JVM参数或正确配置Anaconda环境来优化性能。本文聚
vue 打印出现多余空白页的情况
qq_44051062的博客
06-08 1722
vue 打印出现空白页
v-print-nb打印table遇到的问题，翻页给每页加表头&&解决空白页问题&&一页放不下时某一行被从中间截断问题
Judylly的博客
02-09 1699
v-print-nb打印table遇到的问题，翻页给每页加表头&&解决空白页问题&&一页放不下时某一行被从中间截断问题
优化vue-print-nb打印体验：彻底消除空白页的实战技巧
k6l7m8n9的博客
03-01 838
本文针对vue-print-nb插件打印时出现空白页的常见问题，提供了系统性的解决方案。核心在于通过创建打印专用CSS样式表，重置@page、html和body元素的高度与边距，并优化打印区域容器的样式，从而彻底消除因布局计算错误导致的额外空白页。文中包含详细的代码示例和浏览器调试技巧，帮助开发者快速定位并解决问题。
vue-print-nb打印预览时多一张空白页
weixin_42234899的博客
05-11 2940
vue打印多出空白页
使用VUE的打印插件（vue-print-nb）出现多打印一个空白页的问题
NotDreamFish的博客
09-27 3956
先说结论：html标签的高度如果设置为100%，打印div的高度设不设置都会多一个空白页。 经过是这样的： 最近同事写一个项目，但是遇到了一个问题，使用vue-print-nb打印时，预览中一定会出现两页，并且打印的div没有设置高度也没有设置margin。我创建一个新测试项目后发现新项目不会出现两页的情况，一度怀疑是不是被什么插件影响到了。 后来商量以后同事提出可能是继承了父高度，于是我把原项目涉及打印div的父高度的css全都复制了过来，果然出现两页了，问...
解决VUE打印时多一页空白页的问题
weixin_38680881的博客
06-17 1656
解决Vue调用window.print打印多处一页空白页的问题 代码实现 @media print { @page { margin-top: 0mm;//解决打印多出一页空白页的问题 } }
vue-print-nb的使用与常见问题
tang31415926的博客
10-20 8360
vue-print-nb的使用；出现空白页；设置页眉页脚
css高度问题
weixin_47138303的博客
07-20 194
问题一：明确高度要一层层传下去——Flex 层用flex: 1，普通层用（父先有高度）。问题二flex: 1负责算高度，负责让算出的高度不被内容撑破；缺了后者，高度链和内部滚动都会失效。
CSS 样式应用的专项操作题
SG_3604的博客
07-19 186
本文摘要：该CSS练习题涵盖了基础样式、盒模型与布局、响应式设计三大模块。基础部分包括选择器应用（元素/类/ID选择器）、文本样式控制和伪类/伪元素实现交互效果；盒模型部分演示了边框、内外边距设置及Flex布局应用；响应式部分展示了Grid布局结合媒体查询实现多端适配。通过具体代码示例，完整呈现了卡片样式、水平垂直居中、悬停效果、定位覆盖等常见网页样式实现方法，并包含动态交互的样式逻辑说明。
cute一些入门操作
AlgoCraft
07-19 33
本文介绍了CuTe中Tensor的Shape、Stride、Layout概念及其在Flash Attention实现中的应用。主要内容包括： Tensor基础：通过make_shape/make_stride显式表示数组形状和内存访问模式，如Q矩阵的形状[seqlen_q, h, d]和对应stride。 切片操作： 使用_和索引进行维度选择 local_tile将大Tensor划分为固定大小的块(如128x128) 数据拷贝： partition_S/partition_D划分源/目标Tensor到各线程
canvas 的 css 像素点 和 屏幕物理像素点以及DPR
brick_404的博客
07-20 364
它并不像 SVG 那样记录“这里有一个半径为 50 的圆”这样的数学公式，它只记录“这些像素是红色的”。ECharts 会在初始化时读取 DPR，将 Canvas 的内在属性尺寸（canvas.width/height）设为 CSS 尺寸 × DPR，这样就能保证1 个 Canvas 像素对应 1 个物理像素，从而让图表在高清屏幕上也能保持像素级的锐利。简单来说，它决定了屏幕的显示精度。可以把它想象成一张巨大的“网格纸”或“马赛克拼图”，网格上的每一个小格子（像素）都被赋予了特定的颜色值。
从零搭建浏览器端 AI 原型：React、WebGPU 与 Tailwind CSS 的一次实践
最新发布
2501_93234401的博客
07-20 229
浏览器端 AI 并不是简单地“把模型放到网页里”，而是一个前端工程问题：需要处理浏览器能力检测、资源加载、状态切换、错误提示、进度展示与 GPU 计算。这个原型的价值在于先搭好了基础框架：用 React 管理页面状态，用 WebGPU 做能力检测，用 Tailwind 快速构建 UI。下一阶段再补齐模型加载与推理链路，就能形成一个完整的端侧 AI Demo。
CSS 类选择器组合
alexander068的专栏
07-20 214
【代码】CSS 类选择器组合。
CSS line-height 通关指南：从“草稿纸线条“到文字垂直居中
🧑‍💻 前端 · 写作中 📍 沉淀：HTML/CSS/JavaScript/Vue 📍 学习：React、微信小程序、Webpack、Vite 📍 目标：用输出倒逼输入，备战下次飞跃
07-20 313
本文用“草稿纸线条”比喻解析CSS行高line-height，详解px、无单位数字等取值方式，揭秘单行文字垂直居中技巧，并附MDN规范与可访问性建议，助你轻松掌握这一排版利器。
子页面和dialog案例
weixin_52236586的博客
07-18 47
【代码】子页面和dialog案例。
纯HTML单文件实现非洲棋（播棋） —— 从零打造离线双人对弈 + 人机对战游戏
神奇代码在哪里
07-16 333
非洲棋(Mancala)游戏实现解析 本文介绍了一个纯前端实现的非洲棋游戏开发过程，主要特点包括： 单文件离线可用 - 只需一个HTML文件即可运行，不依赖任何框架或网络 直观的动画效果 - 特别设计了逆时针撒播棋子的动画，让游戏规则更清晰可见 完整游戏逻辑 - 实现了标准Kalah规则，包括撒播、额外回合、吃子和终局判定 人机对战功能 - 包含简单的AI对手，共用核心游戏逻辑 响应式设计 - 适配不同屏幕尺寸 文章从游戏规则、数据结构、UI设计到核心算法进行了详细解析，重点介绍了： 棋盘状态的一维数组表示
菜鸟教程学习笔记——html（八）
m0_53194352的博客
07-16 208
HTML5 的 video 元素提供了一种标准化的视频播放方式，支持 MP4、WebM 和 Ogg 三种格式。通过 source 元素可以指定多个视频源，浏览器会自动选择可识别的格式播放。video 元素支持控制属性（如 width、height）和 JavaScript 交互（播放/暂停、调整尺寸等），并可通过 track 元素添加字幕。若浏览器不支持 video 元素，则会显示标签内的备用内容。这种方案替代了传统的插件（如 Flash），实现了更灵活的视频嵌入与控制。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JonTang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值