Как я создаю веб-страницу для печати, таким образом, она не разделит плохо по страницам?

Ваше formControlName находится внутри ngfor. Это одно и то же имя для каждого индекса. Вот почему значение изменяется в каждом индексе. Вам нужно создать FormArray.

 ngOnInit() {
         this.ipdForm = this.fb.group({
          IpdData: this.fb.array([]) 
       })
     }

     get ipdFormArray() {
       return this.ipdForm.get('IpdData') as FormArray;
    }

         filterDefaultValues() {
       for (let i = 0; i < this.IpdData.length; i++) {
            const datas =  this.fb.group({
                 ratingForm: [''],
                 question: [IpdData[i].question],
                 });
      this.ipdFormArray.push(datas);
        }         
       }

измените свой HTML, как показано ниже; ngfor для массива реактивной формы и добавьте имя formarray

     <form class="custom-form" [formGroup]="ipdForm" 
    (submit)="ipdFeedback();">
    <div formArrayName="IpdData">
    <div class="form-group" *ngFor="let d of ipdFormArray.controls;let i = index" [formGroupName]="i">
    <label for="dob" class="control-label">
    {{d.question }}
    <sup class="custom-required">*</sup>
  </label>
    <label class="radio-inline custom-radio">
    <div *ngIf="IpdData[i].options == 'radio'">
        <div >
           <label class="radio-inline custom-radio">
            <input class="radio-text" formControlName="ratingForm" type="radio"  value="Poor" />
            <span class="radio-text">Poor</span>
          </label>
    <label class="radio-inline custom-radio">
            <input class="radio-text" formControlName="ratingForm" type="radio"  value="Fair"   />
            <span class="radio-text">Fair</span>
          </label>
    <label class="radio-inline custom-radio">
            <input class="radio-text" formControlName="ratingForm" type="radio"   value="Good"  />
            <span class="radio-text">Good </span>
          </label>
  </div>
  </div>
  <div *ngIf="IpdData[i].options == 'text'">
    <textarea placeholder="Comments" formControlName="ratingForm" type="text" class="form-control" tabindex="14"></textarea>
  </div>
  </label>
  </div>
  <button type="submit"></button>

Вы получите значения в this.ipdFormArray.value

7
задан stu 3 October 2008 в 11:34
поделиться

5 ответов

У нас есть система, которая распечатывает счета на выбранные заказы, который помещает a

<br style="page-break-before:always;">

между каждым счетом. Это означает, что каждый счет идет на новую страницу.

Это - также хорошая практика для использования таблицы стилей печати

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

который может скрыться/отобразить соответствующие области страницы. Никакой смысл распечатывающий leftnav не связывается и т.д., когда кто-то хочет фактическое содержание страницы.

8
ответ дан 6 December 2019 в 11:54
поделиться

Я обычно избегаю веб-страницы (HTML), печатающий все вместе. Если отформатировано печать требуется, я генерирую PDF или форматы CSV/электронной таблицы для моих клиентов для печати всегда, они хотят.

Я обычно генерирую печать для глобального использования, подразумевая, что все типы настроек отличаются (например, формат бумаги: Законный, Буква, A4, и т.д.) от рабочего места до рабочего места. Я нашел, что это слишком большая задача гарантировать эстетический вывод везде.

2
ответ дан 6 December 2019 в 11:54
поделиться

Любой с CSS page-break-before/after

Другие пути:

  • используйте JasperReports и загрузите данные в отчете вместо страницы HTML
  • используйте ЩЕГОЛЯ Apache с XSL для перевода HTML (или необработанные данные) ЩЕГОЛЮ и позже к PDF

Оба метода довольно обширны, поэтому если Вы не хотите тратить некоторое усилие, лучше непосредственно пропускают к другому ответу....

0
ответ дан 6 December 2019 в 11:54
поделиться

Существует свойство CSS, чтобы попытаться гарантировать положение разрывов страницы. Можно дать элементу правило page-break-before: always или page-break-after: always', чтобы указать, должно ли повреждение быть прежде или после элемента. Это имеет довольно плохую поддержку через браузеры, и я не полагался бы на нее. Дополнительную информацию см. в http://www.w3schools.com/CSS/pr_print_pageba.asp.

1
ответ дан 6 December 2019 в 11:54
поделиться
Другие вопросы по тегам:

Похожие вопросы: