Javascript Girl
  1. Javascript Girl
  3. Imprimez le modèle Html dans Angular 2 (ng-print in Angular 2)
Intereting Posts
JQuery UI Tabs – Afficher tous les onglets Window.onforeunload et window.onunload ne fonctionne pas dans Firefox, Safari, Opera? Impossible d'ajouter l'élément <script> Le moyen le plus rapide d'ouvrir une nouvelle fenêtre optimisée en utilisant JavaScript / JQuery? Comment mettre en pause un joueur YouTube lors de la dissimulation de l'iframe? L'API YouTube ne fonctionne pas dans iOS (iPhone / iPad) mais fonctionne bien dans les navigateurs de bureau? Définir la date de jQuery UI Datepicker au format "MM yy" Existe-t-il un moyen de rendre le rendu div de droite à gauche HTML Comment supprimer les éléments DOM sans fuite de mémoire? Utilisez la toile et javascript pour lire les couleurs des pixels d'une image La fermeture de Javascript "stocke" la valeur au mauvais moment Comment puis-je mettre en œuvre les événements de survol et de déploiement pour plusieurs éléments qui se chevauchent? Comment mettez-vous le point bleu sur les onglets Google chiffrés? Comment éviter les astuces de chevauchement du diagramme de lignes multi-séries d3.js Comprendre les fonctions du nombre en JavaScript

Imprimez le modèle Html dans Angular 2 (ng-print in Angular 2)

Je veux imprimer le modèle HTML en angulaire 2. J'avais exploré à propos de cela J'ai eu une solution dans angularjs 1 Print Html Template in Angularjs 1

Toute suggestion serait appréciée

C'est comme ça que je l'ai fait dans angular2 (c'est similaire à cette solution plunkered ) Dans votre fichier HTML: 

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

Et dans votre fichier 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(` <html> <head> <title>Print tab</title> <style> //........Customized style....... </style> </head> <body onload="window.print();window.close()">${printContents}</body> </html>` ); popupWin.document.close(); }

Vous pouvez faire comme ça dans angular 2

Dans le fichier 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('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + innerContents + '</html>'); popupWinindow.document.close(); } }

En html 

 <div id="printSectionId" > <div> <h1>AngularJS Print html templates</h1> <form novalidate> First Name: <input type="text" class="tb8"> <br> <br> Last Name: <input type="text" class="tb8"> <br> <br> <button class="button">Submit</button> <button (click)="printToCart('printSectionId')" class="button">Print</button> </form> </div> <div> <br/> </div> </div> 
 import { Directive, ElementRef, Input,HostListener,AfterViewInit } from '@angular/core'; declare const jQuery : any; @Directive({ selector: '[printDirective]' }) export class PrintDirective implements AfterViewInit { constructor(public e:ElementRef){} @Input() printelement: string; button = this.e.nativeElement; ngAfterViewInit(){ let self = this; jQuery(this.button).on("click", function(){ var html = jQuery("#"+self.printelement).prop('outerHTML'); let sheets = document.styleSheets; let array = []; for(var c = 0; c < sheets.length; c++) { array.push(sheets[c].href); } let printStyles:any=""; array.forEach(function(value:any,index:any){ var res = value.substring(value.indexOf(":") + 1); printStyles = "<link rel='stylesheet' type='text/css' href="+value+" media='print'>\n"+printStyles ; }); let printContents = html; let popupWin; popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto'); popupWin.document.open(); popupWin.document.write(` <html> <head> <title>Print tab</title> ${printStyles} </head> <body onload="window.print();window.close()">${printContents}</body> </html>` ); popupWin.document.close(); } )}; }

Cela pourrait se faire comme ça. J'ai fait une directive pour imprimer la page html. Cela prend simplement l'identifiant de l'élément de saisie comme entrée du modèle de composant.

App.component.html 

 <div id="print"> <div id="mydiv">Hello 1st div</div> <div id="seconddiv">Hello second div</div> <img src="pic.jpg"> <div id="main"> <div>Hello ...how are you <p> demo demo</p> </div> <div>JHADVSJVCJHCSJHB</div> <div>CJHAEV</div> </div> 

  <button [printelement]="'print'" printDirective>print</button>

C'est la façon de l'utiliser dans le modèle. Testé sur angulaire 4 sur chrome. Sur Firefox, la couleur d'arrière-plan peut être ajoutée si vous manquez l'aide de css: 

  background-color: red !important; -webkit-print-color-adjust: exact; color-adjust: exact;