如何使用 Angular 创建 n 个可打印页面? [英] How to use Angular to create n printable pages?

问题描述

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

Well, I've searched a bit and did not find anything similar.

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

I want to know how can I use Angular to create printable content, jump to the end of the page and print more content.

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

How can I force the content to always fit on a specific size, like a PDF? Do I need Angular to do this? If not HTML, can I iterate over PDF printable pages?

示例:

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

Suppose I'm a teacher and I've asked my students to send a 10 lines essays to a specific web system. Now, in the admin page, I want to print 10 students essays on 10 pages, every one of them starting on line 0 of the respective page.

示例 2:

假设我想打印 n 个空白页.在系统上，我被问到我想要多少页，Angular 会打印出来.

Suppose I want to print n blank pages. On a system, I'm asked how many pages do I want and Angular prints it.

示例 3:

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

Suppose I have an array with 3 names. I want to print the first name on the first page, second on the second and third on the third.

@edit

这是实施的最终项目.这是一个时间表生成器.它在 app.js 中使用一个数组并为每个员工打印一个新页面.

This is the final project implemented. It's a timeSheet generator. It takes an array inside app.js and print a new page for every employee.

推荐答案

您只需应用适当的 CSS:

You simply apply the appropriate CSS:

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


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

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

Every essay will be printed on a separate page.

这篇关于如何使用 Angular 创建 n 个可打印页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！