问题标签 [css-print]

我正在为客户编写发票 web 应用程序，并且我正在尝试更新页面布局，因此如果某个部分中的文本溢出，那么打印的页面将看起来不错，而不是像现在这样可怕。

如果文本溢出第一页，则打印的每一页都有页眉/页脚（这些包含客户信息和发票上的价格）。

问题是一切看起来都很好，但是每个 div 中的文本都隐藏在页眉和页脚下，我该如何解决这个问题？

如您所见，Div 隐藏在页眉和页脚下，我尝试应用边距/填充，但它只将其放在第一页的顶部和最后一页的底部：/

这只是一个测试页面，因为我正试图弄清楚一切的外观。

任何帮助都会得到极大的帮助:)。

在我的网站上，Google Chrome（Linux 上的 81 版，如果重要的话）的打印功能已停止。打印预览窗口卡在显示“正在加载预览...”。

执行此操作时，Chrome 会在控制台上打印以下消息：

当我打开开发人员工具并将 CSS 媒体类型模拟设置为“打印”时，页面会像打印一样正确显示，并且控制台中没有错误。

如何找出问题的根源以及如何解决？

我window.print用于在 Angular 9 中生成打印窗口。如果它会中断，我想将其推div送到下一页，如下图所示。

用于此的 HTML 如下：

请建议我如何将 div 推送到下一页？

我有一些动态内容，打印时我发现浏览器会在表格<thead>和下面的表格之间插入分页符<tbody>，根据前面的动态内容产生类似这个屏幕截图的内容。

在这种情况下，我希望它将表格/标题移动到下一页，所以我自己没有标题。

break-after: avoid看起来这应该是 CSS 规则，我尝试了thead、 包含tr和 的组合th，但它似乎没有任何效果。

主要在 Chrome 上尝试，我在 Firefox 中得到了类似的结果，如果可能的话，我希望它能够在所有主要浏览器中工作。

在许多情况下，表格可以很好地适合当前页面，所以我不想在新页面上开始每个表格。它们也可能比一整页长，并且需要能够在行之间的某处中断。

从无头 chrome Playwright 会话（下面的代码）制作 PDF 时，我在左侧得到 PDF，而如果我通过在 chrome 中保存到 pdf 来完成它，我得到第二个输出。

我已经明确设置并使用了边距，preferCSSPageSize: true并且两者都给出了相同的（左）结果。

我如何让 Playwright 从打印对话框中为我提供与 chrome 相同的输出？

正在打印的文件的示例在这里。（在现实生活中，考虑到脊椎宽度，它们都略有不同。）

我使用网格布局将 img 元素组织到网格中。问题是在打印过程中，页面拆分上的网格单元格被分割。这并不奇怪，但我不希望他们这样做。我想找到一种方法来告诉网格将单元格分隔符与页面对齐。

有任何想法吗？

我正在使用一种解决方法，只需用简单的 oldmedia query替换。但我非常喜欢网格可以通过. 因此，任何满足这种自动缩放和打印而无需 JS 的解决方案都适用于我。gridinline-blocksgrid-column-template: repeat(auto-fill, minmax(250px, 1fr))

我有一份需要横向和纵向打印的 html 格式的报告 我可以为各个块使用“@page {size:landscape/portrain}”属性吗？

我们正在设计一个系统来生成标签表，它输出 HTML/CSS 文件，然后打算打印在匹配的标签纸上。

这个问题本质上涉及一些简单的算术（加法和乘法），以将标签网格放置在页面上，并具有相应的边距和偏移量。

最小的例子

假设我们有一个 4x12 网格标签的最小示例，尺寸为 21.2x45.7mm：

这是打印CSS：

这是（无聊而冗长的）相应的 HTML：

在这种情况下，页面为 210 毫米宽，这与 4label行的长度完全匹配：

然而，如果上述内容在Firefox或Chrome网络浏览器中打开然后打印（使用默认边距和 100% 缩放），每行仅适合 3 label div。

问题

• 是否有一些我们没有考虑到占用空间的元素？

• 或者这是与布局引擎的数值精度相关的固有限制？

• 有没有办法修复这个代码，所以布局是准确的？

我正在尝试从 HTML 创建 PDF 文件。现在我想在我的页面上应用背景。不过@page {background: blue;}好像不支持。我试图将背景添加到正文中，但这会导致其他问题。首先，我需要为第一页指定背景，为所有其他页面指定背景。

此外，生成的文档如下所示：

这不是我想要的。我需要背景来覆盖整个页面，但内容应该在页面边框内。

它应该看起来像这样：

为此，我在正文中添加了填充。但仍然存在问题。第二页上没有打印背景，文本不在页边距内然后打破页面，我无法为第一页设置特殊背景。

这是我的第二个结果的 HTML 和 CSS。首先，唯一的区别是，边距被添加到@page 而不是正文。

""" 使用 pyppeteer 的 page.pdf 方法渲染和打印。

如何创建一个背景，它用页面边框内的文本覆盖整个页面？以及如何为第一页设置单独的背景？

我有一个要求以不同尺寸（A3、A2 等）设置不同页面的样式。

是否有可能对不同大小的不同页面使用不同的@pages？

我需要这样的东西：

第二页：

另外，我需要更改哪些内容才能应用不同的页面？

非常感谢。