Imprimir modelo de HTML em Angular 2 (ng-print em Angular 2)

Eu quero imprimir modelo HTML em angular 2. Eu tinha explorado sobre isso eu tenho solução em angularjs 1 Imprimir Template Html em Angularjs 1

Qualquer sugestão será apreciada

Foi assim que fiz em angular2 (é semelhante a essa solução plunkered ) Em seu arquivo HTML:

  

e no seu arquivo TS:

 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(`   Print tab   ${printContents} ` ); popupWin.document.close(); } 

você pode fazer assim em angular 2

no arquivo ts

  export class Component{ constructor(){ } printToCart(printSectionId: string){ let popupWinindow let innerContents = document.getElementById(printSectionId).innerHTML; popupWinindow = window.open('', '_blank', 'width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no'); popupWinindow.document.open(); popupWinindow.document.write('' + innerContents + ''); popupWinindow.document.close(); } } 

em html

 

AngularJS Print html templates

First Name:

Last Name:


No caso de alguém se deparar com este problema, se você já tiver colocado a página, recomendo usar consultas de mídia para configurar sua página de impressão. Você pode então simplesmente append uma function de impressão ao seu botão html e à sua chamada de componente window.print ();

component.html:

 
Header is here.
all my beautiful print-related material is here.
my footer is here.

component.ts:

 onPrint(){ window.print(); } 

component.css:

 @media print{ .doNotPrint{display:none !important;} } 

Você também pode adicionar outros elementos / seções que não deseja imprimir na consulta de mídia.

Você também pode alterar as margens do documento e todas na consulta de impressão, o que o torna bastante poderoso. Existem muitos artigos online. Aqui está uma que parece abrangente: https://www.sitepoint.com/create-a-customized-print-stylesheet-in-minutes/ Isso também significa que você não precisa criar um script separado para criar uma ‘versão impressa ‘da página ou usar lotes de javascript.

Serviço de impressão

 import { Injectable } from '@angular/core'; @Injectable() export class PrintingService { public print(printEl: HTMLElement) { let printContainer: HTMLElement = document.querySelector('#print-container'); if (!printContainer) { printContainer = document.createElement('div'); printContainer.id = 'print-container'; } printContainer.innerHTML = ''; let elementCopy = printEl.cloneNode(true); printContainer.appendChild(elementCopy); document.body.appendChild(printContainer); window.print(); } } 

Сomponent que eu quero imprimir

 @Component({ selector: 'app-component', templateUrl: './component.component.html', styleUrls: ['./component.component.css'], encapsulation: ViewEncapsulation.None }) export class MyComponent { @ViewChild('printEl') printEl: ElementRef; constructor(private printingService: PrintingService) {} public print(): void { this.printingService.print(this.printEl.nativeElement); } } 

Não é a melhor escolha, mas funciona.

A melhor opção que encontrei para resolver isso sem ter problemas com meus estilos foi usar uma rota separada para minha saída impressa e carregar essa rota em um iframe.

Meu componente circundante é mostrado como uma página de guia.

 @Component({ template: '', styleUrls: [ 'previewTab.scss' ] }) export class PreviewTabPage { printSrc: SafeUrl; constructor( private navParams: NavParams, private sanitizer: DomSanitizer, ) { // item to print is passed as url parameter const itemId = navParams.get('itemId'); // set print page source for iframe in template this.printSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.getAbsoluteUrl(itemId)); } getAbsoluteUrl(itemId: string): string { // some code to generate an absolute url for your item return itemUrl; } } 

O iframe apenas carrega a rota de impressão que renderiza um componente de impressão no aplicativo. Nesta página, a impressão pode ser acionada depois que a visualização é totalmente inicializada. Outra maneira poderia ser um botão de impressão no componente pai que aciona a impressão no iframe por window.frames["printpage"].print(); .

 @Component({ templateUrl: './print.html', styleUrls: [ 'print.scss' ] }) export class PrintPage implements AfterViewInit { constructor() {} ngAfterViewInit() { // wait some time, so all images or other async data are loaded / rendered. // print could be triggered after button press in the parent component as well. setTimeout(() => { // print current iframe window.print(); }, 2000); } } 

pop up print screen

O problema pode ser tão pequeno quanto este no Angular 2+

Eu perdi esta pequena seleção, como mostrado na imagem selecione checkbox de seleção de charts de fundo, isso mostrará todos os css aplicados em componentes, como In Angular 2 + css arquivos já estão incluídos no arquivo .ts (anotação de componente) desse componente, então Não é necessário fornecer tags de link, HTML ou body

No meu caso esta paz de código funcionou

 print(){ window.focus(); window.print(); }