HTML CSS 打印 - 在分页符前插入“继续...”文本（自动）答案

【问题标题】：HTML CSS Printing - Insert "Continued..." text before a page break (auto)HTML CSS 打印 - 在分页符前插入“继续...”文本（自动）
【发布时间】：2014-07-18 17:18:09
【问题描述】：

@media print样式的HTML通过PDFreactor工具渲染生成PDF文件。

HTML 文件中的一个页面包含一个 html 表格。表中的行数是动态的，并使用Mustache Java 插入，因此可以流过多个页面。重复 <thead> 时，表格会自动中断。

现在，我需要帮助的要求是在自动分页时插入文本继续....。

知道怎么做吗？

【问题讨论】：

标签： html css pdf-generation

【解决方案1】：

对此的一种解决方案是在包含文本“继续...”的页面末尾之前动态插入额外的表格行。

PDFreactor 有一个非常强大的 JavaScript 引擎，它允许在布局期间修改 DOM 并访问内部布局数据，因此您可以使用以下脚本来完成此操作：

var CONTINUED_TEXT = "continued...";
var currentPage = 0;

// iterate over tables
var tables = document.getElementsByTagName("table");

for (var i = 0; i < tables.length; i++) {
    var table = tables[i];

    // determine number of columns
    var cells = table.firstElementChild.querySelectorAll("tr:first-child td, tr:first-child th");
    var colspan = cells.length;

    for (var i = 0; i < cells.length; i++) {
        var cellColspan = parseInt(cells[i].getAttribute("colspan"));

        if (cellColspan) {
            colspan += cellColspan - 1;
        }
    }

    // iterate over rows
    var rows = table.querySelectorAll("tbody tr");

    for (var j = 0; j < rows.length; j++) {
        var row = rows[j];
        var bd = ro.layout.getBoxDescriptions(row);

        if (bd) {

            // check if a page break occurs
            if (bd[0].pageIndex > currentPage) {

                currentPage = bd[0].pageIndex;

                if (j > 0) {

                    var previousRow = rows[j - 1];

                    // create a new row
                    var continueRow = document.createElement("tr");
                    var continueCell = document.createElement("td");
                    continueCell.setAttribute("colspan", colspan);
                    continueCell.textContent = CONTINUED_TEXT;
                    continueRow.className = "continueRow";
                    continueRow.appendChild(continueCell);
                    previousRow.parentNode.insertBefore(continueRow, previousRow);

                }
            }
        }
    }
}

所以这基本上会遍历表的所有行，并通过查询 PDFreactor 的布局信息来确定是否发生分页符。然后它会通过操纵 DOM 在中断之前动态插入一个带有“继续...”文本的新表格行。

要将此脚本添加到 PDFreactor，请使用 API 方法

pdfReactor.addUserScript("", "url/to/script.js", false);

也可以将脚本直接添加到您的文档中。在这种情况下，请确保启用 JavaScript 模式，如下所示：

pdfReactor.setJavaScriptMode(PDFreactor.JAVASCRIPT_MODE_ENABLED);

我认为这不能仅通过使用 CSS 来完成。希望这会有所帮助。

【讨论】：