Как использовать Angular для создания n страниц для печати?

Question

Ну, я искал немного и не нашел ничего подобного.

Я хочу знать, как использовать Angular для создания печатаемого контента, перейти к концу страницы и распечатать больше контента.

Как я могу заставить контент всегда соответствовать определенному размеру, например, PDF? Нужно ли мне Угловое делать это? Если не HTML, можно ли перебирать страницы PDF для печати?

Пример:

Пусть Я учитель, и я попросил своих студентов, чтобы написать 10 строк эссе на определенную веб-системы. Теперь, на странице администратора, я хочу напечатать 10 эссе студентов на 10 страницах, каждый из которых начинается в строке 0 соответствующей страницы.

Пример 2:

Предположим, я хочу, чтобы напечатать п пустые страницы. В системе мне задают вопрос, сколько страниц я хочу, и Angular печатает ее.

Пример 3:

Предположим, что у меня есть массив с 3 именами. Я хочу напечатать первое имя на первой странице, второе на втором и третьем на третьем.

@edit

Это final project реализуется. Это генератор времени. Он принимает массив внутри app.js и печатает новую страницу для каждого сотрудника.

Answer 1

Вы просто применить соответствующий CSS:

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


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

Каждое эссе будет распечатана на отдельной странице.

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

} 

Я использовал это в качестве приложения я разрабатывала, где приборная панель и UI компоненты мешающего с непостоянно содержимого Я хотел напечатать.

Кредит идет this article. С тех пор я изменил директиву, но я никогда бы не сделал этого, не прочитав его.

В качестве добавленного комментария, я думаю, что вы пытаетесь добиться чего-то из возможностей Углового. Вы можете печатать до n предметов или статей, но нет простого способа определить их как страницы внутри самого приложения Angular. Я предлагаю использовать ответ @ zeroflagL в сочетании с этой директивой.

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

Мои два цента.