前端黑洞网 首页
资源下载

前端电子书

前端视频教程

前端小游戏

前端脚本

前端项目实战

其他资源

博客 问答 程序员的那些事
写博客 注册

程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

当使用 Chrome 打印一个背景不适合分页符的 div 框时，如何不显示一个框两次？

发布于2023-09-17 18:54     阅读(1239)     评论(0)     点赞(26)     收藏(3)

看一下下图（Chrome 中的页面打印对话框）：

在此输入图像描述

灰色背景的 DIV 不再适合第一页，因此浏览器决定将整个 div 移动到新页面（这就是我想要的）。

然而，我想要摆脱的是第一页上带有背景颜色的空框（源自同一个 DIV）。

有没有办法将整个盒子包装到下一页？并且根本不将其显示在第一页上（如果不适合）。

最后，我对打印页面不感兴趣，而是使用wkhtml2pdf从此 HTML 生成 PDF。但这是同一个问题。

所以仅使用 webkit 的解决方案对我来说就很好了。

如果您想尝试一下上图中可以看到的内容，这里是 HTML / CSS 代码。只需在 Chrome 中打开打印对话框，您应该会看到相同的结果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PP-00000074</title>
    <style>
        html {
            margin: 0;
            padding: 0;
            align-self: center;
        }

        body {
            padding: 0;
            align-self: center;
            margin: 0;
        }

        table {
            width: 100%;
            border-spacing: 0;
            border-collapse: collapse;
            font-size: 13px;
            margin-bottom: 45px;
        }

        table tr {
            page-break-inside: avoid;
        }

        thead {
            width: 100%;
            align-self: center;
        }

        thead tr {
            border-bottom: 15px solid white;
        }

        th {
            color: #000000;
            font-weight: normal;
        }

        td {
            color: #7a7a7a;
            word-break: break-word;
        }

        tr.spaceAbove>td {
            padding-top: 20px;
        }

        .nowrap {
            white-space: nowrap;
        }

        .centerBodyBox {
            margin: 0 100px;
        }

        .invoiceTotal {
            page-break-inside: avoid;
            background-color: #eeeeee;
            font-size: 13px;
            line-height: 1.56;
            text-align: right;
            color: #000000;
        }

        .invoiceTotalColumn1 {
            font-size: 12px;
            color: #7a7a7a;
            padding: 35px 0;
            vertical-align: bottom;
        }

        .invoiceTotalColumn2 {
            width: 25%;
            padding: 35px 0;
            vertical-align: top;
        }

        .invoiceTotalColumn3 {
            width: 15%;
            padding: 35px 0;
            vertical-align: top;
        }

        .text-left {
            text-align: left;
            padding-right: 10px;
        }

        .text-right {
            text-align: right;
            padding-left: 10px;
        }

        .align-top {
            vertical-align: top;
        }
    </style>
</head>
<body>
<div class="centerBodyBox">
    <table>
        <thead>
        <tr >
            <th class="text-left">Beschreibung</th>
            <th class="text-right">Preis</th>
            <th class="text-right">Menge</th>
            <th class="text-right">Mwst.</th>
            <th class="text-right">Gesamt</th>
        </tr>
        </thead>
        <tr class="spaceAbove">
            <td class="text-left align-top">magni voluptates</td>
            <td class="nowrap text-right align-top">15,42 EUR</td>
            <td class="nowrap text-right align-top">2 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">30,84 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">rerum ipsa</td>
            <td class="nowrap text-right align-top">11,93 EUR</td>
            <td class="nowrap text-right align-top">2 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">23,86 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">rem consequuntur</td>
            <td class="nowrap text-right align-top">137,50 EUR</td>
            <td class="nowrap text-right align-top">1 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">137,50 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
        <tr class="spaceAbove">
            <td class="text-left align-top">omnis ut</td>
            <td class="nowrap text-right align-top">44,31 EUR</td>
            <td class="nowrap text-right align-top">3 </td>
            <td class="nowrap text-right align-top">19%</td>
            <td class="nowrap text-right align-top">132,93 EUR</td>
        </tr>
    </table>
</div>
<div class="invoiceTotal">
    <div class="centerBodyBox">
        <table style="margin: 0">
            <tr>
                <td class="invoiceTotalColumn1 text-left">
                    Some text.
                </td>
                <td class="invoiceTotalColumn2 nowrap text-right">
                    <div>Zwischensumme (Brutto):</div>
                    <div>Versandkosten:</div>
                    <div>Zahlungsmethode:
                    </div>
                    <div>Nettobetrag (ohne Mwst):</div>
                    <div>zzgl. 19% Mwst.:
                    </div>
                    <div style="margin-top: 20px;"><b>Gesamtbetrag (Brutto):</b>
                    </div>
                </td>
                <td class="invoiceTotalColumn3 nowrap text-right">
                    <div>325,13 EUR</div>
                    <div>4,47 EUR</div>
                    <div>4,16 EUR</div>
                    <div >280,51 EUR</div>
                    <div>53,25 EUR</div>
                    <div style="margin-top: 20px;"><b>333,76 EUR</b></div>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

解决方案

您可以将 page-break-inside 与 一起使用.invoiceTotal。

但发票总计正在崩溃。添加page-break-inside:avoid到身体。


window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

网友说：做开发，不被领导喜欢怎么办？

前端精选：在 WPF 中实现融合效果



所属网站分类: 技术文章 > 问答

作者：黑洞官方问答小能手

链接：http://www.qianduanheidong.com/blog/article/531379/6cf42a06b48bd0a3c266/

来源：前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

26 0
收藏该文
已收藏

评论内容：(最多支持255个字符)




程序员的那些事(new)

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

网友说：做开发，不被领导喜欢怎么办？

前端精选：在 WPF 中实现融合效果

电子书(new)

CSS3学习必备书籍（CSS3 实战）.pdf

CSS网站布局实录（第二版）.pdf

CSS禅意花园.pdf

HTML5权威指南.pdf

HTML5移动Web开发指南.pdf

零基础学HTML+CSS [第三版].pdf 下载

数据结构与算法 JavaScript 描述.pdf

客户端存储技术.pdf 下载

前端100本高清pdf电子书打包下载

深入理解HTML5：语义、标准与样式 PDF 下载

脚本(new)

压扁小鸟小游戏

.美女拼图游戏源码

JavaScript按键控制坦克移动

JavaScript打地鼠游戏

HTML5实现抓怪物小游戏

网页版-别踩白块游戏

网页版扫雷

HTML5实现拼图游戏

网页版2048

HTML5箭头射击游戏代码

博客(new)

Web 页面之间传递参数的几种方法

uniapp安卓离线打包步骤

Vue--》深入理解 Vue 3 导航守卫，掌握前端路由的灵魂技能！

java图片转二进制流_java将文件转化成二进制流

个人简历html网页代码（使用chatgpt完成web开发课的实验）

【HTTP 协议】掌握 Web 的核心技术

Three.js指定路径漫游（站走切换、路径动画、展示路线、开始、暂停、继续、退出、镜头跟随）

完全卸载vscode

flex布局优化(两端对齐，从左至右)

【熬夜送书 | 第二期】清华社赞助 | 《前端系列丛书》

视频教程(new)

带你快速入坑ES6

0到1快速构建自己的后台管理系统

基于Element-UI二次封装业务组件-前端视频教程

基于WebAR实现3D任务书桌上跳舞

Tensorflow.js 实现垃圾分类

全方位入门git

六个案例学会响应式布局

Ajax实战案例之列表渲染

Phaser从0到1实战微信2D小游戏【钢琴方块】

元旦贺卡-前端视频教程

项目实战(new)

NodeJS+Express+MongoDB实战项目

打造仿小米电商网站

2020版uni-app项目实战

2020前端React项目实战

小程序全栈开发之喵喵交友

Vue实战项目之喵喵电影

实战项目之网易云

实战项目之头条

前端实战项目之幸福西饼

实战项目之拉勾网

问答(new)

居中网站内容 + 垂直导航栏

如何将项目左对齐（标题）

Nunjucks 嵌套变量

文本显示在图像上悬停

HTML/CSS - 按钮在另一个元素下排列

MathJax 库在公式中留下滚动条

如何在MVC5中用Razor将一行设为红色

在 Razor 页面 WebApplication 中将帖子从文本区域保存到数据库

响应式图像背景尺寸封面

将图像放入图像内

游戏(new)

jQuery坦克大战网页小游戏

JS俄罗斯方块游戏代码

Vue.js注意力大考验小游戏代码

HTML欢乐打地鼠小游戏

HTML5糖果消消乐闯关小游戏

扑克牌翻牌记忆小游戏

HTML翻牌小游戏代码

HTML5拉杆子过关小游戏代码

HTML5倾斜迷宫小游戏

HTML5五子棋小游戏

其他资源(new)

jQuery益智拼图游戏

HTML5制作的2048游戏

.小球撞击游戏源码

驴子跳跳网页游戏源码

.jQuery五子棋游戏

HTML5街头霸王游戏源码

.网页版台球小游戏

地图拼图游戏

HTML5中国象棋游戏

Maven+JSP+SSM+Mysql实现的音乐网站