Question

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

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

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

示例：

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

示例2：

假设我要打印n个空白页面。在一个系统上，我问了我想要多少页，Angular打印它。

示例3：

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

@edit

这是final project已实施。它是一个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组件干扰了我想要打印的内容的可印刷性。

归功于this article.我已修改指令，但我从未在不阅读指令的情况下完成此操作。

作为一个补充评论，我认为你想要完成的是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>

每篇论文都会在另一页上打印出来。

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

2 个答案: