Je veux imprimer un modèle HTML dans angular 2. J'ai exploré ce sujet et j'ai obtenu une solution dans angularjs 1. Modèle d'impression Html en Angularjs 1
Toute suggestion serait appréciée
Réponses
Trop de publicités?
C'est comme ça que je l'ai fait dans angular2 (c'est similaire à cela plongé solution) 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();
}UPDATE :
Vous pouvez également raccourcir le chemin et utiliser simplement ngx-print pour un codage moins incohérent (mélange de JS et TS) et des cas d'impression plus contrôlables et sécurisés dès le départ.
Farasi78
Points
571
Au cas où quelqu'un d'autre rencontrerait ce problème, si vous avez déjà mis la page en page, je vous recommande d'utiliser des requêtes média pour configurer votre page d'impression. Vous pouvez ensuite simplement attacher une fonction d'impression à votre bouton html et appeler window.print() dans votre composant ;
composant.html :
<div class="doNotPrint">
Header is here.
</div>
<div>
all my beautiful print-related material is here.
</div>
<div class="doNotPrint">
my footer is here.
<button (click)="onPrint()">Print</button>
</div>component.ts :
onPrint(){
window.print();
}composant.css :
@media print{
.doNotPrint{display:none !important;}
}Vous pouvez également ajouter d'autres éléments/sections que vous ne souhaitez pas imprimer dans la requête média.
Vous pouvez également modifier les marges du document dans la requête d'impression, ce qui la rend très puissante. Il existe de nombreux articles en ligne. En voici un qui semble complet : https://www.sitepoint.com/create-a-customized-print-stylesheet-in-minutes/ Cela signifie également que vous ne devez pas créer un script distinct pour créer une "version imprimée" de la page ou utiliser beaucoup de javascript.
Vikash Dahiya
Points
2915
Vous pouvez faire comme ceci 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>
lenard-bernardo-ei
Points
31
EDITAR: mise à jour des snippets pour une approche plus générique
Juste comme une extension de la réponse acceptée,
Pour obtenir les styles existants afin de préserver l'apparence du composant ciblé, vous pouvez.. :
-
faire une requête pour obtenir le
<style>y<link>des éléments du document de premier niveau -
l'injecter dans la chaîne HTML.
Pour saisir une balise HTML :
private getTagsHtml(tagName: keyof HTMLElementTagNameMap): string
{
const htmlStr: string[] = [];
const elements = document.getElementsByTagName(tagName);
for (let idx = 0; idx < elements.length; idx++)
{
htmlStr.push(elements[idx].outerHTML);
}
return htmlStr.join('\r\n');
}Puis dans le snippet existant :
const printContents = document.getElementById('print-section').innerHTML;
const stylesHtml = this.getTagsHtml('style');
const linksHtml = this.getTagsHtml('link');
const popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
${linksHtml}
${stylesHtml}
^^^^^^^^^^^^^ add them as usual to the head
</head>
<body onload="window.print(); window.close()">
${printContents}
</body>
</html>
`
);
popupWin.document.close();Maintenant, en utilisant les styles existants (les composants Angular se créent un style à part entière), ainsi que les cadres de style existants (par exemple Bootstrap, MaterialDesign, Bulma), cela devrait ressembler à un extrait de l'écran existant
Kliment Ru
Points
575
Service d'impression
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();
}
}Сomposant que je veux imprimer
@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);
}
}Pas le meilleur choix, mais ça marche.
