Блог

Главная - Вопросы по программированию - Угловой материал , оформление выполняется некорректно при выполнении window.print()

Угловой материал , оформление выполняется некорректно при выполнении window.print()

#angular

#угловой

Вопрос:

Я использую угловой материал 6 для отображения данных в сетке, используя материал, как показано ниже. Для опции печати вызывается метод «printReport()», где содержимое HTML берется из представления и вызывается window.print() .

Здесь дизайн не отображается должным образом на странице печати. если мы используем таблицу, все получается хорошо. Если мы используем угловой материал mat-table , дизайн не будет выполнен правильно.

Есть идея использовать опцию печати?

 <div>
    <a href="javascript:void(0)"><i class="material-icons"
        (click)="printReport('reportMainContent')">local_printshop</i></a>
  </div>
<mat-table>
<ng-container matColumnDef="WorkOrder">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef="let job" class="fontsize10">{{user.name}}</mat-cell>
      </ng-container>
</mat-table>

файл .ts

 printReport(printSectionId: string) {
    let popupWinindow;
    const innerContents = document.getElementById(printSectionId).innerHTML;
    popupWinindow = window.open('', '_blank', 'width=1900,height=950,scrollbars=yes,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
    popupWinindow.document.open();
    // tslint:disable-next-line:max-line-length
    popupWinindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="main.scss" /></head><body onload="window.print()"><div>'   innerContents   '</div></html>');
    popupWinindow.document.close();
  }

Комментарии:

1. скорее всего, он просто не найдет нужные стили и т.д.? как выглядит скриншот? разве это не вариант вывода в pdf или что-то в этомроде?

2. отображение по таблице не отображается

3. Есть ли какая-либо ошибка в консоли?

4. Ошибки нет. Но дизайн не выровнен в соответствии с таблицей, поскольку print dom не понимает <mat-table></mat-table>

5. да, это то, что я думал, произойдет. Я вижу, возможно, 2 варианта, которые вы все еще можете попробовать: перейдите по маршруту с помощью диалогового окна material вместо создания собственного всплывающего окна быстрого исправления. он, несомненно, лучше поймет разметку материала. и другой способ, который я могу придумать, это преобразовать внутренний html в pdf. но опять же, понимает ли он теги angular material

Ответ №1:

Мне нужно было распечатать отчет из интерфейса, и я создал функцию, которая генерирует отчет о выбранном элементе HTML и его стиле, включая mat-table. Чтобы использовать его, просто добавьте id к HTML-элементу структуры mat-table и отправьте его с помощью параметра в функции, которая соберет PDF-файл и распечатает его полностью.

 <div id='table'> 
  <mat-table></mat-table> 
</div>

Идентификатор будет использоваться в качестве ссылки для извлечения HTML-структуры через document.getElementById(printSectionId) и добавления его в тело структуры для печати, в то время как document.querySelectorAll('style') будут извлечены все существующие стили страницы.

   static print(printSectionId: string): void {
    const styles = this.getElementTag('style');
    const links = this.getElementTag('link');
    const selectionHtml: HTMLElement = document.getElementById(printSectionId);
    const popupWindow = window.open('', 'Extrato', 'top=0,left=0,height=920px,width=1080px');
    popupWindow.document.open();
    popupWindow.document.write(`
    <html>
      <head>
        <title>Extrato</title>
        ${styles}
        ${links}
      </head>
      <body>
        ${selectionHtml.innerHTML}
        <script defer>
          function triggerPrint(event) {
            window.removeEventListener('load', triggerPrint, false);
            setTimeout(function() {
              closeWindow(window.print());
            }, 0);
          }
          function closeWindow(){
              window.close();
          }
          window.addEventListener('load', triggerPrint, false);
          window.addEventListener('load', getHeaderFooter, false);
        </script>
      </body>
    </html>`);
    popupWindow.document.close();
  }

  static getElementTag(tag: string): any {
    const html = [];
    const elements = document.querySelectorAll(tag);
    elements.forEach(element => html.push(element.outerHTML));
    return html.join('rn');
  }