Как распечатать страницу в Angular2? - PullRequest
Новая
       0

Как распечатать страницу в Angular2?

0 голосов
/ 09 апреля 2020

Я пытаюсь добавить функцию печати в свое приложение.

Код для печати, что я нашел здесь:

html

в файле ts: 

   <div id="print-section">
      // your html stuff that you want to print
    </div>
    <button (click)="print()">print</button>

print(): void {
    let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
      <html>
        <head>
          <title>Print tab</title>
          <style>
          //........Customized style.......
          </style>
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
    );
    popupWin.document.close();
}

Я также пробовал ngx-print, но у меня go тот же результат, что и ошибка в ответе: enter image description here

Ответы [ 2 ]

0 голосов
/ 09 апреля 2020

Ваш код, который вы вставили сюда, работает в stackblitz. У вас там должна быть другая проблема, поэтому вам следует попробовать ViewChild https://stackblitz.com/edit/angular-znkrkv

<div id="print-section" #printer>
      // your html stuff that you want to print
    </div>
    <button (click)="print()">print</button>

import { Component,ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
}) 
export class AppComponent  {
  @ViewChild('printer') t;

  name = 'Angular';
  print(): void {
    let printContents, popupWin;
    console.log(this.x);
    printContents = this.t.nativeElement.innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
      <html>
        <head>
          <title>Print tab</title>
          <style>
          //........Customized style.......
          </style>
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
    );
    popupWin.document.close();
}
}
0 голосов
/ 09 апреля 2020

Пожалуйста, попробуйте вот так 

print() :void {

const printContent = document.getElementById("print-section");
const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
WindowPrt.document.write(printContent.innerHTML);
WindowPrt.document.close();
WindowPrt.focus();
WindowPrt.print();
WindowPrt.close();

}

Примечание: у него не будет стиля, который вы применили

ссылка на стек для рабочего образца: https://stackblitz.com/edit/angular-epxjct

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...