margin-top样式导致Vue中引用了Print.js调用打印多一张空白页

最新推荐文章于 2024-09-09 12:42:34 发布
最新推荐文章于 2024-09-09 12:42:34 发布
阅读量1k 收藏 4
点赞数 3
CC 4.0 BY-SA版权
分类专栏： vue css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sinat_29009169/article/details/96978889
本文探讨了打印时出现空白页的问题及其原因，并提供了一个简单有效的解决方案：通过在父元素上添加1像素的顶部内边距来阻止垂直外边距合并现象。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题是打印时多处一张空白页

参考他人回答知道是由于样式引起的

参考资料

1.样式资料     2. 打印相关资料

由于垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下
(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。

再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己
“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。

解决方案，在父元素加上style="padding-top:1px"

vue使用printJS实现批量打印及单个打印 避免空白页
cyj0919的博客
07-11 99
本文介绍了使用print-js库实现批量打印功能的实现方法。通过安装print-js依赖后，创建一个batchPrintAction方法，该方法接收选中行数据，生成包含多个标签页的HTML字符串。每个标签页以表格形式展示6个数据字段，并设置了80mm×50mm的标签尺寸。方法使用PrintJS进行打印，配置了打印样式和页面设置，并在打印完成后移除临时创建的DOM元素。该实现支持批量打印和单条数据打印，包含数据验证和样式自定义功能。
Vue使用PrintJS实现页面打印功能
m0_72416767的博客
10-26 5216
收到一个需求,要求实现 拼接成表格并能一键回填数据并能打印成A4大小(或者生成pdf)的功能。实际上回填数据以及拼接部分都很简单,稍微陌生的就是调用浏览器打印功能并将页面内容变成pdf并打印。然后百度了一下发现百度上给出的解决方案并不够具体,很容易踩坑出现各种奇怪的错误,于是就将本人的踩坑解决方案以及思路都记录下来。
jquery.print.js打印页面时，多分出一页
清音的博客
04-15 1782
可能是要打印的元素，有内边距和外边距，可以设置 margin:0;padding:0;border:0;
vue使用printJS打印多页时出现第一页空白问题
IDycy的博客
06-30 1039
【代码】vue使用printJS打印多页时出现第一页空白问题。
使用那各VUE的打印功能（print.js）出现多打印一个空白页的问题
weixin_39547000的博客
08-03 922
一、使用vue-print-nb方法 打印出现空白页问题 <style media="print"> @media print { html { height: auto; /* background-color: #ffffff; */ margin: 0px; } body { /* border: solid 1px #ffffff; */ /* margin: 10mm 15mm 10mm 15mm; */ }
关于Vue使用print插件，打印时会有多出来的空白页问题解决
Admin_yws的博客
05-29 3447
vue使用print打印时，会多出空白页，这多半是外边距导致的，将打印的dom对象的margin 设置为0，即可解决
html打印多了空白页,使用那各VUE的打印功能（print.js）出现多打印一个空白页的问题...
weixin_30341445的博客
06-20 1266
最近这段时间，用VUE写东西，有个打印功能。百度了一下，铺天盖地的VUE打印的两种实现方法。很感激这些千篇一律的帖子，虽然不知道他们是否真的用过，还是只是复制粘贴。至少这些帖子告诉我，是有两个可以选择的，并且多看几篇帖子，总算把这两个打印方法，都试了一遍。下面简单总结一下：先说结论：请使用第二种方法，下载print.js到本地，然后放到项目中导入。原因后边说。一、使用vue-print-nb方法具...
Vue使用printJS导出网页为pdf、printJS导出pdf、空白页解决、自定义页脚
林中明月间丶
01-05 3631
需求：网页已经写成了pdf的样式，需要点击导出pdf按钮 调用浏览器系统预览-打印。,覆盖外面原有的样式,以去除一些打印时不需要的而原HTML中有的样式。在我们想打印内容的标签上添加id，如下。在想要引入的页面中添加如下代码。
使用vue-pdf打印多一张页面解决方案
qq_35592856的博客
11-22 1377
千古文章一大抄，抄又抄不全，气死了! 解决办法： 1.首选在预览的pdf上面添加一个id，外面包裹一层div添加一个id也行，很关键的！ 2.添加样式，关键的是给id加上样式，好多都没抄对！！ <style> @media print { @page { size: auto; /* auto is the initial value */ margin: 3mm; /* this affects the margin in the printer settings */
vue打印模版模块，使用vue-plugin-hiprint插件搭建过程
qq_14852047的博客
09-09 5944
vue打印模版模块，使用vue-plugin-hiprint插件搭建过程
Vue使用print.js连续打印多页A4表单---修正版
qq_39691676的博客
01-14 8590
父组件 <el-dialog :visible.sync="printDialog" class="printDialog"> <div ref="print"> <section class="print-page page-a4"> <acceptance-form :reg-id="printTabl...
vue 打印类 多打印空白页
迪奥乔斯达的博客
01-13 263
这里是print.js的问题 不能用npm安装 需要手动下载到本地，而且要做些新修改 下载地址 https://github.com/zxc19890923/print/blob/master/print.js // 搜索getStyle方法，添加：str += "<style>html,body,div{height: auto!important;font-size:14px}</style>"; getStyle: function () { var str = "",
printjs打印表格的时候多页的时候第一页出现空白
wangshang1320的博客
04-25 1087
body{margin:0 5px}}` // 解决出现多页打印时第一页空白问题。//重点，将内容换成行内块。3.仔细检查 发现table上面多了个属性page-break-inside:avoid。scanStyles: false,//这里不继承本来样式。居然神奇的解决了，多次尝试 确实是这个属性影响到了。现象：打印多页的时候第一页空白了，一页的时候没有问题。2.有作用，但是样式出问题了 （原地裂开）
关于vue使用print.js打印会有一个空白页的问题
jjsmida1的博客
05-17 3244
关于vue使用print.js打印会有一个空白页的问题 在一次使用vue的print.js打印简历的时候，会多出一个空白页，百度了一些博客，大致方法就是设置margin:0;但是我的项目依然是没有用。 突然想到了把边框打印出来，使用border:1px solid red;点击打印，发现空白页消失了，由于打印的是白色的纸，所以设置border:1px solid white;就可以解决此问题！ ...
前端实现打印2 - 使用 printJS 插件打印；打印多页：第一页空白问题解决、分页问题解决
工作中遇到问题记录
10-26 1218
前端实现打印2 - 使用 printJS 插件打印；打印多页：第一页空白问题解决、分页问题解决
printJS打印多页时出现第一页空白问题
weixin_42830933的博客
02-15 2404
printJS打印多页时出现第一页空白问题。
关于js打印图片，第一页空白问题
xiaoxiongxia的博客
08-02 860
关于js打印图片，第一页空白问题
Vue前端使用Window.print打印页面，能根据表格数量分页，空白页问题解决（一看就懂）
qq_52753722的博客
11-15 2516
windows.print()打印
解决vue-print插件打印时多了张空白页
Black1499的博客
06-08 4811
一、吐槽 天下文章一大抄，说的果然没错。当你搜索vue打印功能时、千篇一律的vue-print插件。 使用起来确实很简单，但是问题却没人解决：打印预览时、多了个空白页。 有人说是用于height设置成100%造成的，给出的解决办法就是改height。试了下不行！！！ 话不多说直接上代码 二、代码 以下代码复制到你打印功能的页面即可。 <style media="print"> @page { size: auto; margin: 3mm; } html {
vue3-print-nb 第一页空白
最新发布
11-23
Vue3-Print-NB是一个用于 Vue.js 应用程序的打印功能插件，它简化了将内容导出到 PDF 或预览并在浏览器中打印的操作。如果遇到第一页空白的问题，可能是由于默认设置、组件布局或者其他因素导致的。以下是几种常见的解决方法： 1. **检查样式**: 确保在打印前页面上没有任何隐藏的空白区域，如空格、透明背景或者 margin 设置过大。 2. **设置初始页内容**：在开始打印之前，可以手动添加一些占位元素，如 `<div style="height:100vh;"></div>` 来填充第一行，避免实际内容的起始位置偏移。 3. **配置打印选项**：在调用 `vue-print-nb` 的方法时，可以传递一个选项对象，设置`headerTemplate`和`footerTemplate`来自定义每页的头部和底部内容，比如日期、页码等。 4. **检查版本兼容性**：确保已安装的插件版本适用于Vue 3，并且与其他库的版本兼容，有些冲突可能导致打印问题。 5. **复现并查看源码**：如果以上都不奏效，你可以创建一个最小示例重现问题，然后查看插件的源码或官方文档寻找解决方案。 如果你正在使用这个插件，可以查阅其官方文档或GitHub issues，看看是否有其他人遇到过类似问题并找到了解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值