如何使用 Angular 创建 n 个可打印页面？

Question

好吧，我搜索了一下，没有找到类似的东西。

我想知道如何使用 Angular 创建可打印内容、跳转到页面末尾并打印更多内容。

如何强制内容始终适合特定大小，例如 PDF？我需要 Angular 来做到这一点吗？如果不是 HTML，我可以遍历 PDF 可打印页面吗？

示例：

假设我是一名教师，我要求我的学生将 10 行的论文发送到特定的网络系统。现在，在管理页面中，我想在 10 页上打印 10 篇学生论文，每篇论文都从相应页面的第 0 行开始。

示例 2：

假设我想打印 n 个空白页。在系统上，有人问我需要多少页，然后 Angular 会打印出来。

示例 3：

假设我有一个包含 3 个名称的数组。我想在第一页上打印名字，在第二页上打印第二个，在第三页上打印第三个。

@edit

这是实现的final project。这是一个时间表生成器。它在 app.js 中获取一个数组，并为每个员工打印一个新页面。

Answer 1

您只需应用适当的 CSS：

.pageBreak {
  page-break-after: always;
}


<p ng-repeat="essay in essays" class="pageBreak">
{{essay}}
</p>

每篇文章都将打印在单独的页面上。

Answer 2

我想将此作为评论，但我没有足够的代表，所以请原谅。 ：/

也许不是一个直接的答案，但我建议你也看看我前段时间找到的这个指令：

此指令可让您隔离页面的特定部分以进行打印。

app.directive('ngPrint', function () {
    var printSection = document.getElementById('printSection');
    // if there is no printing section, create one
    if(!printSection) {
        printSection = document.createElement('div');
        printSection.id = 'printSection';
        document.body.appendChild(printSection);
    }

    function link(scope, element, attrs) {
        element.on('click', function () {
            printSection.innerHTML = '';
            var elemToPrint = document.getElementById(attrs.printElementId);
            if(elemToPrint) {
                printElement(elemToPrint);
            }
        });
        window.onafterprint = function () {
            // clean the print section before adding new content
            printSection.innerHTML = '';
        }
    }

    function printElement(elem) {
        // clones the element you want to print
        var domClone = elem.cloneNode(true);
        printSection.appendChild(domClone);
        window.print();
    }
    return {
        link: link,
        restrict: 'A'
    };
});

您可以通过指定print-element-id 属性来定义该指令将作用于哪个元素的ID，如下所示：

<button ng-print print-element-id="printThis">Print</button>

而你通过使用相同的 id 来定义可打印区域，像这样：

<div id="printThis">
    <!--insert printable content here.-->
</div>

这会将id为printThis的元素的所有内容克隆到id为printSection的元素中，该元素附加在文档的末尾。剩下要做的就是在不打印时隐藏printSection，只显示printSection，在打印时隐藏其他所有内容。 唯一要记住的另一件事是包含用于打印的样式。我的看起来像这样：

@media screen {
    #printSection {
        display: none;
    }
}
@media print {
    body * {
        display:none;
        visibility:hidden;
    }

    #printSection, #printSection *:not(table):not(thead):not(tbody):not(tr):not(td):not(th){
        display: block;
        visibility:visible;
    }
    #printSection {
        position:absolute;
        left:0;
        top:0;
        margin-bottom:0;
    }
    table{
        display:table;
        visibility:visible;
    }
    thead{
        display:table-header-group;
        visibility:visible;
    }
    tbody{
        display:table-row-group;
        visibility:visible;
    }
    td, th{
        display:table-cell;
        visibility:visible;
    }
    tr{
        display:table-row;
        visibility:visible;
    }

}

我在我一直在开发的应用程序中使用了这个，仪表板和 UI 组件干扰了我想要打印的内容的可打印性。

感谢this article. 我已经修改了指令，但如果不阅读它我永远不会这样做。

---

作为补充评论，我认为您要完成的工作超出了 Angular 的能力。您最多可以打印 n 个项目或文章，但没有简单的方法将它们定义为 Angular 应用程序本身的页面。我建议将@zeroflagL 的答案与该指令结合使用。

<div id="printThis">
    <p ng-repeat="essay in essays" class="pageBreak>
      {{essay}}
    </p>
</div>

我的两分钱。