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

Posted 2023-03-06

【中文标题】如何使用 Angular 创建 n 个可打印页面？

【英文标题】：How to use Angular to create n printable pages?

【发布时间】：2016-02-05 00:53:56

【问题描述】：

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

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

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

示例：

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

示例 2：

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

示例 3：

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

@edit

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

【问题讨论】：

到目前为止你得到了什么？

也看一下phantom js

我前段时间尝试过使用 ng-repeat 填充剩余的行以完成页面，但如果用户放大，这将不起作用。

【参考方案1】：

您只需应用适当的 CSS：

.pageBreak 
  page-break-after: always;



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

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

【讨论】：

感谢您的回答，我会在几个小时内尝试。

嘿，零，谢谢。这是最终项目：github.com/Rodmentou/timesheet

【参考方案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>

我的两分钱。

【讨论】：

感谢您的回答。好吧，我很喜欢你的问题和答案，现在你有足够的声誉在任何地方发表评论。我一回到家就试试你的答案。

谢谢！希望你能明白。