How to use Angular to create n pages for printing?

Question

Well, I searched a bit and did not find anything like it.

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

How can I make content always fit a specific size, such as PDF? Do I need Angular for this? If not HTML, can I iterate over PDF pages for printing?

Example:

Suppose I am a teacher, and I asked my students to send 10-line essays to a specific web system. Now, on the administration page, I want to print 10 student essays on 10 pages, each of which starts at line 0 of the corresponding page.

Example 2:

Suppose I want to print n blank pages. The system asks me how many pages I want, and Angular prints it.

Example 3:

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

@edit

This is the final project . This is a time generator. It takes an array inside app.js and prints a new page for each employee.

Answer 1

You just apply the appropriate CSS:

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


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

Each essay will be printed on a separate page.

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, :

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

, :

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

printThis 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;
    }

}

, , , .

. , , .

---

, , , , - - Angular. n , Angular. @zeroflagL .

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

.