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

Question

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

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

如何强制内容始终适合特定大小,如PDF？我需要Angular来做这件事吗？如果不是HTML,我可以迭代PDF可打印页面吗？

例:

假设我是老师,我已经要求我的学生将10行文章发送到特定的网络系统.现在,在管理页面中,我想在10页上打印10个学生论文,每个论文从相应页面的第0行开始.

例2:

假设我要打印n个空白页面.在一个系统上,我被问到我想要多少页,Angular打印它.

例3:

假设我有一个包含3个名字的数组.我想在第一页上打印第一个名字,在第二页打印第二个名字,在第三个页面打印第三个名字.

@编辑

这是最终实施的项目.这是一个timeSheet生成器.它需要app.js中的数组并为每个员工打印一个新页面.

Answer 1

我想把它作为评论,但我没有足够的代表,所以请原谅.:/

也许不是一个直接的答案,但我建议你也看看我前段时间发现的这个指令:

该指令允许您隔离页面的特定部分以进行打印.

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组件干扰了我想要打印的内容的可打印性.

归功于这篇文章.我已经修改了指令,但是如果不阅读它我就永远不会这样做.

作为一个补充评论,我认为你想要实现的是Angular的能力.您最多可以打印n个项目或文章,但是没有简单的方法可以将它们定义为Angular应用程序内部的页面.我建议将@ zeroflagL的答案与此指令结合使用.

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

我的两分钱.

Answer 2

您只需应用适当的CSS:

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


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

每篇论文都将在一个单独的页面上打印出来.