问题标签 [css-paged-media]

我正在尝试在div其中添加动态内容后打印一个可能会非常冗长的内容，并且我目前已声明 CSS@print查询属性以在 A4 长度的纸上仅在我的 html 中打印此 div，

当内容长度短于 A4 页面的长度时，它可以正常工作并且效果很好，但是一旦内容长度超过 A4 长度，可打印版本仍然显示一页，并且它只捕获可以是的内容仅安装在 A4 页面内，其他以下批次正在剪裁。

我想在内容到达页面底部时自动中断页面。我尝试了几个小时，谷歌搜索和测试。（Chrome/Firefox/Opera 都显示相同的结果）

注意：内容div位于 Angular 8 应用程序的组件内部。+ 实际内容table在 this 里面div。提到的样式在主styles.css文件中。

Chrome中显示的打印预览 -

其余的被剪裁而不是中断到另一页，因为它应该。知道我的代码有什么问题吗？

任何帮助，将不胜感激！

我最近开始阅读 DITA 1.3 规范 pdf（大约 1300 页）。为了避免眼睛疲劳，我将 Adob​​e Reader 设置为深色主题。这看起来很简单，但是我为其编写文档的一些人对计算机并不了解。

所以我很好奇 - 有没有办法通过单击 PDF 中的按钮来使用 JavaScript（或类似的）切换深色主题？根据我公司的规定，我必须提供带有白页和黑色文本的文档 - 不允许仅输出深色主题。但可切换的输出可能是可以接受的。

下面的 JavaScript 在 HTML 中运行良好，但在通过 Antenna House (V6.6 CSS) 发布时，我很难让它在 PDF 中运行。

我尝试使用具有 onclick 功能的按钮和锚点以及 Antenna House 的“设置操作”：

两者都没有工作；有可能吗？

使用@page size 时，我无法使其在预览中显示为小尺寸。例如，我有这个@page size 值：

我明白了：

即使我改成 3.5 英寸 x 4 英寸或 4 英寸 x 6 英寸，这始终是我得到的尺寸。是不是我做错了什么，或者我错过了什么，或者这是不可能的（小尺寸）。

我有一个用于打印的 2 列布局。h2-5 在列内，h1s 跨越两列。我正在使用Paged.js进行分页。

这两个页面显示了可接受的布局：

但是，如果出现标题位于列底部的情况，我希望将标题强制到下一列的顶部。

如果一篇新文章从页面底部的 40% 开始，我也希望它也被强制到下一页。

对于 h2 及以下，我在标题上方注入一个 div，如果标题位于其列的底部，我将其膨胀以推入下一列。

这似乎对 h2-5 有效，因为它们位于由浏览器管理的流程中。但前提是它们在左栏中；如果它们是正确的，它们就会被从页面上撞出。例如：

将 H1 从页面上撞出会导致问题，垫片膨胀，但会将标题推入不可见的区域，或者其他一些奇怪的情况。

第一个图像显示了第二个图像中出现的标题，从页面中删除。

以下（略微简化的）标记是生成第 11 页的内容（右，第二张图片）

我在里面做 shim-inflation afterPageLayout，它调用这个函数：

这似乎应该工作，但它不是很优雅。我怀疑我可以用breaktoken? 有没有正确的方法来做到这一点？

对于 H1，我还尝试在上面的文章中添加一个类，具体取决于将标题撞到下一页需要多少行。即一系列css规则：

然后在 Paged.js 生命周期的同一点应用该类。它有同样无益的结果。

如果我提前知道哪些标题需要打破，我可以给他们一个break-before: column;或break-before: page;规则，但内容是不提前知道的。事后添加这些规则似乎不适用于 paged.js 的生命周期。我怀疑这是一个生命周期问题，因为如果我在正确的点/正确的处理程序处执行此操作，将内容从页面上推出应该会导致下一页的重排。

在 CSS Paged Media 中，有一个名为 string-set 的有用函数，它允许您定义一次字符串并在任何地方使用它：

HTML：

输出（使用 Antennahouse Formatter 渲染时）：
警告：这是警告文本。

我不能让它在浏览器中工作，因为 string-set 已被弃用。所以我正在寻找一种方法来替换浏览器中的“字符串集”功能。

显而易见的是一个变量：

但这似乎不起作用。我可以用字符串填充变量：

但是当我尝试读取属性值时，它失败并且变量保持为空。

尝试将 CSS @page 边距与固定位置的页眉和页脚结合使用。

到目前为止的问题是@page 边距不允许固定位置元素显示超出这些边距。

下面的示例：一个网页生成 50 个随机大小的 lorem ipsum 文本段落，以填写一些 8.5 x 11 的打印页面。

目标：让页眉和页脚出现@page在每个打印页面上定义的页边距之外。

问题：位于@page 边距之外的页眉和页脚被剪裁或消失。

注意：页面旨在与 Google Chrome 上的 MacOS 兼容。页眉/页脚问题仅适用于印刷媒体，不适用于屏幕。

我正在尝试使用 XSLT 和 CSS 将 XML 报告转换为 PDF。此 PDF 应在页脚中包含特定的页码，例如特定表格后的分页符。

根据我的发现，这可以使用 CSS3“at-attributes”来实现“分页媒体”（例如@page）。但是，如果我理解正确，我可能很难找到解释这些属性以创建 PDF 的工具（更不用说它需要先从 XML 转换）。

我发现我可以使用paged.js脚本让它在浏览器中运行，但它只有在我运行本地服务器（例如live-server）时才有效，因为所有 Web 浏览器中都有一些本地文件限制。我可以（有点）使用命令行开关来克服这个问题，--allow-file-access-from-files但它会在渲染完成之前打印文档（看起来浏览器不等待paged.js脚本完成）。我尝试了不同的开关：chrome.exe --headless --disable-gpu --allow-file-access-from-files --run-all-compositor-stages-before-draw --virtual-time-budget=100000 --print-to-pdf="<destination>" "<source>". 也许节点引擎的一些开关可以提供帮助？

我的问题是如何使用具有免费商业许可的软件以编程方式将 XML 文件转换为 PDF，使用 XSLT 从 XML 中提取感兴趣的数据，并使用 CSS 将 PDF 格式化为正确的分页文档？我需要paged.js完成它吗？

关于我的文件：在我的 XML 文件中，我引用了从 XML 中提取特定数据的本地 XSL 文件；他们删除重复项并按日期对它们进行排序。此 XSL 文件引用本地 CSS 文件以提供良好的格式和“分页”属性。XSL 还参考paged.js了脚本和相关的 CSS，如脚本文档中所示。

我试过，在其他之间，，，，但weasyprint没有成功。htmldochtml5-to-pdfwkhtmltopdf

我愿意接受任何建议。

编辑：我正在试验 XSL-FO（正如评论中所建议的那样），我不得不承认它工作得很好。在我看来，页面控件比 CSS 更具可读性。我现在看到的唯一问题是它需要额外的安装（Apache FOP 和 Java 运行时环境）。在我的场景中，在 .NET 中使用 FOP 会更好。

无论如何，我决定更详细地描述我使用 Chrome 作为渲染器的基于 CSS 的解决方案，因为它不需要额外的安装程序（或者至少我认为是这样）。我已经花了一些时间在它上面，似乎它几乎可以工作了。也许有人会发现问题出在哪里，然后它将成为使用 CSS 的分页媒体的一个非常好的解决方案。

完整transform.xsl的文件是：

在我的style.css我有@page如下规则。我的原始文件中有更多内容，但在这里并不重要。

数据存储在Reports.xml（见下文）。在这个 xml 文件中，您可以放置​​任意数量的Result字段。我的文件中有 200 个结果，但我在这里截断了它以使其更清晰。

我的文件中也有，interface.css如paged.polyfill.js文档中所述（请参阅 参考资料transform.xsl）。

当我Results.xml在 Chrome 中使用命令打开时，chrome.exe --allow-file-access-from-files <file path>它的工作方式为例外（见下图）。

当我尝试Results.xml使用命令在 Chrome中打印我的时，chrome.exe --headless --disable-gpu --allow-file-access-from-files --run-all-compositor-stages-before-draw --virtual-time-budget=100000 --print-to-pdf=<destination> <source>它会产生意外的结果。仅生成几页，总页数 ( counter(pages)) 在页脚中返回 0（见下图）。

所以也许有人会想办法让它工作。

也许--js-flags会成功？或者也许我应该添加/更改一些东西paged.polyfill.js？

使用分页媒体 CSS 将 HTML 转换为 PDF 时，我需要将不包括封面页（正面和背面）的页面总数放在页脚中。

下面的 CSS 适用于计算所有页面。

但我需要的是类似的东西：

根据 W3.org 的说法，“页面”计数器不能被操纵(1)并且 calc() 函数不支持使用计数器(2)。

使用自定义计数器将不起作用，因为它返回当前计数器值而不是最终计数器值。所以我会得到第 1 页（共 1 页）、第 2 页（共 2 页）、第 3 页（共 3 页）……

作为一种解决方法，我使用了带有以下 JavaScript 的表单字段：

有更好的选择吗？

编辑：可以在没有 CSS 并且不需要表单字段的情况下完成的一种替代方法是进行“双重发布”。IE

1. 发布文档一次。
2. 得到总页数并减去 2。
3. 重新发布将页数作为参数传递。

我需要将Paged.js与表格的自定义 CSS 结合使用。

Paged.js 不断地覆盖我的风格。我什至添加!important了所有属性，但 Paged.js 仍然会覆盖它们。

我可以阻止 Pagedjs 这样做吗？我正在使用 JS 的本地副本，因此我可以轻松更改它。

我有一个 HTML，其中表格单元格的宽度以 mm （在@style属性中）定义。这是为适合 A4 页面（210 毫米页面宽度）而设计的。我正在使用 CSS 分页媒体。

现在我想将同一个表格用于使用 A5（宽度 148.5 毫米）的不同输出，所以我希望 CSS 调整表格大小以适合。

这个 CSS 适用于非常简单的表格（一个单元格）。一旦表格变得更复杂（如上面的示例），max-width 指令就会被忽略。

有没有办法在 CSS 中实现我想要的（使表格适合 A5）？还是我必须处理 HTML 并计算新的单元格宽度？