print.js 打印的网页单页内容，多出第二页空白页面

最新推荐文章于 2024-06-19 16:04:29 发布
最新推荐文章于 2024-06-19 16:04:29 发布
阅读量3.9k 收藏 2
点赞数 3
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z2181745/article/details/116742888
版权


问题如上图：

解决过程：给table外嵌套的div设置了样式page-break-after也没有效果，最后索性给打印区域添加加边框，准备看看预览时空白页里有什么，结果后一页的空白页就这么没了(⊙o⊙)…

观察发现，加上边框后，table的宽度确实有减少一丢丢，就这样吧。。。加了border: 1px solid transparent; 

附图解决之后的效果，如果大家也有类似的问题，可以考虑试试看

Julie_GO
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
html 分页打印页码,js控制分页打印、打印分页示例
weixin_33505417的博客
06-15 890
pageEncoding="UTF-8"%>javascript打印-打印页面设置-打印预览代码.Noprint{display:none;}.PageNext{page-break-after: always;}function printsetup(){// 打印页面设置wb.execwb(8,1);}function printpreview(){// 打印页面预览wb.execwb(...
原生JS打印插件之jQuery.EasyPrint.js使用文档
07-21
原生JS打印插件之jQuery.EasyPrint.js使用文档 调用浏览器自带打印功能，使用JavaScript的 window.print(); 方法。 使用JS实现打印功能；JavaScript 实现打印操作；javascript打印大全；通用；js实现打印的方式；JS...
window.print打印总是多出一页空白页
最新发布
m0_46423771的博客
06-19 218
也没有设置打印页面的高度，不存在高度导致出现第二页空白，不符合。图片高度设置太高，导致出现第二页空白，不符合。打印页面的第一个标签不是h系列，不符合。最后发现是这个，设置之后就好了。在CSDN用找了半天答案，
解决: 使用html2canvas和print-js打印组件时, 超出高度出现空白页
L_C_sunny的博客
10-09 973
vue html2canvas printJS 打印有空白页面
print-vue-nb插件打印表格多页，内容顶格问题优化
sven_chen93的博客
03-26 888
这样第二页就不会出现顶格了，只是每页多加了一个空白行，设置thead的border为白色就看不到边框了。后面换了下printjs插件，效果不是很好；后面大佬提示可以加个thead标签。只看大家还有更好的办法没。
前端 打印PrintJS
m0_68782725的博客
09-27 467
需要注意的是 中途遇到过 打印预览的时候 出现过 前面空白一页 或者说 是 文件 居中等等问题 有的样式在print中无法使用等。场景 批量打印 可能就不能用转成图片的形式了 这样会被分页截断 自己还是用的printJS 如果有好的方法可以交流交流。在打印样式用 加入上图样式 如果遇到打印表格 可以加上 标签 在遇到分页 第二页可以显示表头。场景 单页打印 使用HTML2canvas 转出图片 然后使用Print。如遇到空白 一页 打印内容 无法居中问题。
通过“document.write”方式，在js文件引入js文件时，造成页面空白问题
tangxl2008008的专栏
10-08 5582
1、问题：因为document.write()会将页面已经加载的 组件 清除掉，再添加 write的内容；                     若前端文件应用js时，，放在了 文件的末尾，，该js文件中，通过“document.write”方式加载了其他的js文件，，就会清除 原界面已加载的组件。         2、解决办法：              1）在前端页面 顶部 加
jqprint获取打印页数_如何将每张打印多页PPT的PDF变成常规课件
weixin_39860064的博客
11-21 556
在工作和学习中，经常会收到各种 PDF 文件，尤其是老师的课件。为了防止学生大量上传到各种文库网站赚积分，或者为了方便学生打印出来预习复习。通常，会在每页 PDF 里面，打印多张 PPT 内容。一般是 6 张或 9 张，下面简单做了个图示作说明。假装这是老师发来的 PDF 文件，一页里面包含 6 页 PPT :然而有时候，我们不仅仅是需要把 PDF 打印成纸质阅读。而是希望，能把里面的 PPT 内...
vscode 使用vue快捷键快速搭建一个vue页面
weixin_45289656的博客
10-21 2055
vscode中创建vue快捷键模板
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
热门推荐
qq_54753561的博客
12-25 26万+
2022年最新前端面试题 热门题目 （面经最全版）（蛋糕）...持续维护中，HTML和Css部分vue部分，Null，undefined，Boolean，Number，String，BigInt 、BigInt 、Object、1. **解构赋值、扩展运算符、class类、模块化 import export、箭头函数、generator函数、promise let cosnt ......
vue中使用vue-print.js实现多页打印
10-15
主要介绍了vue中使用vue-print.js实现多页打印，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
jQueryPrint.js打印网页
05-22
jQueryPrint.js是一款基于jQuery的轻量级插件，专门用于实现网页打印功能。它允许开发者在不使用浏览器内置打印对话框的情况下，定制化地选择打印的内容，提高用户体验并优化打印流程。这款插件的核心特性是能够精准...
vue print.js打印支持Echarts图表操作
01-18
网上找的print.js做了修改，支持Echarts图表这里记录一下，不知道是哪家的代码了，我看都一样 这里是看到了两个源码 https://github.com/xyl66/vuePlugs_printjs/blob/master/print.js ...
css 设置＜img＞适应指定宽高，保持原始比例展示
Julie_Go的专栏
03-17 2万+
在img标签上使用css属性：object-fit object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。 可以满足对图片在固定宽高范围内进行剪切 保持原始比例，有以下值 object-fit: fill|contain|cover|scale-down|none|initial|inherit; 值 描述 fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。 contain 保持原有尺寸比例。内容被缩放。 cover 保持原
vue 中 自定义css 覆盖第三方ui样式
Julie_Go的专栏
10-09 1610
在项目引入element-ui 等第三方ui库时，自定义css覆盖第三方样式的方式： 1.scoped的自定义css无法覆盖第三方样式，把自定义css写在全局style下（一般除非是全局样式，否则容易污染其他组件内的样式） 2.使用 >>> (普通css文件内) 或/deep/ (使用sass 或less 编译) 注：有时/deep/会报错，可以使用::v-deep 代替 <style lang="scss" scoped> ::v-deep .el-table .
css3 箭头
Julie_Go的专栏
03-29 860
给正方形设置两个相邻的边框，旋转角度即可实现不同方向，类似上面的箭头图案 { width: 7px; height: 7px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; transform: rotate(-125deg); } ...
html table 表格内固定列的css实现
Julie_Go的专栏
09-26 809
目标：不考虑使用UI组件，利用css和table标签实现表格前几列固定在左侧，其余内容水平滚动 实现方式:利用css 属性 position: sticky; 首先查询一下使用场景浏览器是否兼容（下图），确保在需要的场景上支持 sticky粘性定位，当父元素在视窗范围内该元素的定位不受影响，当页面滚动，父元素将要移出视窗范围时，定位会变成fixed。 根据这一特性，给表格内需要固定的列或行设置sticky属性并指定left、top、bottom、right即可实现 ...
html中使用print.js打印web页面时,图片元素居中
06-12
要想在使用 print.js 打印 web 页面时让图片元素居中，可以通过以下步骤实现： 1. 在 CSS 中为图片元素添加以下样式： ``` img { display: block; margin: 0 auto; } ``` 这样可以让图片元素居中显示。 2. 在使用 print.js 的 JavaScript 代码中，为打印内容的样式添加 CSS 样式，例如： ``` var stylesheet = document.createElement('style'); stylesheet.type = 'text/css'; stylesheet.innerHTML = 'img { display: block; margin: 0 auto; }'; document.head.appendChild(stylesheet); ``` 这样在打印预览时也能看到图片元素居中的效果。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值