8

我有一个动态生成的 html 页面，旨在打印。

我想根据 div 部分创建分页符 - 任何给定的 div - 如果它不完全适合页面，请在它之前插入一个分页符。

从理论上讲，从单个 div 到最多 10 个的任何地方都可能适合单个打印页面，所以我想我需要在页面加载后使用 jQuery 来插入。

如果这是一个桌面应用程序，我会这样处理它：

  1. 测量页面宽度和高度（使用某种打印机对象）。
  2. 测量每个 div 高度 - 并从页面总剩余高度中减去
  3. if ( remaining_space - div_height > 0 ) { // 放到页面上 } else { // 先插入分页符 }

有什么方法可以使用 jQuery、CSS、原始 JavaScript 或其他任何东西，让我遇到这种情况？

4

5 回答 5

3

好的，我花了一天左右的时间来解决这个问题，所以我想发布我的解决方案，以防其他人需要答案。

一般来说，这就是我所做的。

  1. 正常生成输出（不是打印机预期的）
  2. 创建了 2 个样式表（一个用于打印机，一个用于屏幕）。对于所有要转换为打印输出的页面元素，测量值以英寸（而不是像素）为单位。
  3. 使用 jQuery，我做了以下事情：

-> 调用将初始页面附加到 DOM 的函数 - 类似这样

// assumes old_page_id is existing element in DOM, and var page_id = 1;
$j("<div class='page' id='" + page_id + "'><div class='print_area'></div></div>")
.insertAfter('#' + old_page_id);

-> 测量作为页面的 div 的高度（在我的例子中是 $('.page').height(); ）

-> 运行一个函数来插入 div 和新页面 - 像这样

$('div_class').each(
 function() {
  // measure height of $(this)
  // add it to running total of used space on existing page
  // if sum total exceeds remaining space, create new page, and add to that one
  // if still room left, add to this one
 }
);

请注意，打印机样式表中的每个页面 div（在我的例子中，class='page'）都有这个：

分页后：总是；

这就是我如何在我想要的打印机上创建一个新页面的方法。

运行上面的 jQuery 函数后，我隐藏了包含要移动到打印页面中的 div 元素的原始部分。请注意，我无法事先隐藏此部分，因为我的 jQuery 测量不会产生有效结果（在我的情况下，我将所有 div 放在一个 div 包装器中，id 为' hide_me '，并将样式设置为height:1px；溢出：自动；）。

我意识到这是非常 50,000 英尺的视图，但希望它对您有所帮助。

于 2011-02-03T20:58:12.967 回答
2

您始终可以在 HTML 中的点处插入一个带有 CSS 属性 {pageBreakBefore: 'always'} 或 {pageBreakAfter: 'always'} 的空 DIV 标记，您可以在 jQuery 中通过检查页面边界的高度来计算页面边界DIV 或其他任何东西。但是您需要对页面内容有相当深入的了解，并且可能将您的字体大小等指定为“pt”而不是“px”。

不过，请在此处查看类似的查询：

使用 CSS 强制打印分页符

于 2011-02-02T18:13:13.183 回答
0

不完全是您正在寻找的内容，但请查看此 http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

再加上一点 JS，你可能想要达到的目标。

于 2011-02-02T18:14:20.187 回答
0

您可以尝试使用此插件来打印页面的元素。http://www.recoding.it/wp-content/uploads/demos/jqprint-demo.htm

如果您遵循为桌面应用程序建议的相同逻辑，这可能会有所帮助。您可以将“页面”包装在 div 中，这就是您要告诉 jqPrint 打印的内容。分页符可以是另一个元素，也可以是 div，但有一个类让您知道它是分页符。例如：

<div id="#page1" class="page">
...
</div>
</div id="#break1" class="break"> </div>

ETC..

然后

$('#page1').jqprint();

我不知道你是否熟悉 jQuery。如果你不让我们知道。

于 2011-02-02T18:14:54.090 回答
0

在我看来，印刷分页的重点是不要把事情严重分割。通常，您最不希望严重拆分的是表格数据。因此，这是一种假设您已将<div>'s 更改为表格格式并将不应拆分为<tbody>分组的行集分组的方法。

我们希望标记页眉和页脚以供代码查找，并且我们不一定希望它们出现在描述它们的位置

这会在页面加载时调用自身，但可以在打印之前调用。

<script>
    $().ready(function () {
        $('table.paged').each(function (i, o) {
            BreakPages($(o));
        })
    });
    function BreakPages(jSource) {
        $('body').width("7in");
        var perInch = $('body').width() / 7.5;
        var nPageHeight = 9 * perInch;

        var jHeader = null;
        var jFooter = null;
        var jWrapper = jSource.clone().empty();
        var jPage = null;
        var iPage = 0;
        jSource.after("<div></div>");
        var jFixed = jSource.next();

        function substed(jStuff) {
            var jCopy = jStuff.clone();
            jCopy.find('span.pageNo').html(" " + iPage + " ").removeClass('pageNo');
            return jCopy;
        }

        jSource.children().each(
            function (iChunk, oChunk) {
                var jChunk = $(oChunk);
                if (jChunk.hasClass('footer')) {
                    jFooter = jChunk;
                }
                if (jChunk.hasClass('header')) {
                    jHeader = jChunk;
                    jFooter = jChunk.nextUntil('.footer').last().next();
                }
                if (!jChunk.hasClass('sample')) {
                    var nHeight = jChunk.height();
                    if (jPage)
                        nHeight += jPage.height();
                    if (jFooter)
                        nHeight += jFooter.height();
                    if (nHeight > nPageHeight) {
                        if (jFooter)
                            jPage.append(substed(jFooter));
                        jPage.after("<p style='page-break-after:always; height:0; width:0'>&nbsp</p>");
                        jPage = null;
                    }
                    if (!jPage) {
                        iPage++;
                        jPage = jWrapper.clone();
                        jFixed.append(jPage);
                        if (jHeader && jHeader !== jChunk)
                            jPage.append(substed(jHeader));
                    }
                    jPage.append(jChunk);
                }
            }
        );
        jFixed.find('span.pageCount').html(" " + iPage + " ");
        jFixed.find('span.pageNo').html(" " + iPage + " ");
        jSource.remove();
    }
</script>

我们将表格布置成这样进行分页。

<body>
    <table>
        <tbody class="header">
            PAGE ONE HEADER
        </tbody>
        <tbody class="header sample">
            LATER PAGE HEADER (IF RELEVANT)
        </tbody>
        <tbody class="together">
            ROW GROUP 1
        </tbody>

        <tbody class="together">
            ROW GROUP N
        </tbody>
        <tbody class="footer">
           FOOTER
        </tbody>
    </table>
</body>

我们扫描<tbody>'s 并在任何注定要跨越页面末尾的元素之前填充页脚和页眉。

我们用 css 类标记页眉和页脚，并通过将页眉和页脚放在需要更改的行流中的位置来跟踪更改页眉和页脚的可能性，但使用另一个 css 类使它们不可见。

Annoyingly some implementations of page breaking only apply to strictly "block" elements, so it is not defined on tbody. Therefore I have applied it to a <p> tag class appended to each page table.

于 2014-08-16T14:37:21.067 回答