html - HTML CSS打印-在分页符之前插入“续...”文本(自动)

通过PDFreactor工具呈现具有@media print样式的HTML，以生成PDF文件。

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

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

任何想法如何做到这一点？

最佳答案

一种解决方案是在包含文本“ continue ...”的页面末尾之前动态插入其他表行。

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在中断之前动态插入带有“ continue ...”文本的新表行。

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

pdfReactor.addUserScript（“”，“ url / to / script.js”，false）;

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

pdfReactor.setJavaScriptMode（PDFreactor.JAVASCRIPT_MODE_ENABLED）;

我认为这不能仅通过CSS来完成。希望这可以帮助。