In this post we are going to see how to create a Print component which will print the user defined element in DOM using the Typescript, for this first we have to create a Print component then we have to use that component in another component, later we will get a print button in the screen, then when we click the print button, we can find the print of that particular area in the printer.
Component:
import { Component,ViewEncapsulation,
Input,Output,OnChanges,ElementRef,
EventEmitter } from '@angular/core';
@Component({
selector:'print-page',
encapsulation:ViewEncapsulation.None,
template:`
<button (click)="printDiv()"
class="btn btn-sm btn-primary">Print</button>
<div id="printpage">
</div>
`,
styles:[`
@media screen {
#printpage, #printpage * {
display:none;
}
}
@media print {
body *{
visibility:hidden;
background: transparent;
-webkit-print-color-adjust: exact !important;
}
#printpage, #printpage *{
visibility:visible;
-webkit-print-color-adjust: exact !important;
box-shadow: inset 0 0 0 1000px gold;
}
#printpage{
position:absolute;
left:0;
top:0;
}
}
`]
})
export class PrintComponent implements OnChanges{
@Input('section') section:string;
@Output() sectionChange = new EventEmitter<any>();
constructor(private ele:ElementRef){
if(this.section===undefined)
this.section = '';
}
ngOnChanges(changes){
if(changes.section && changes.section.currentValue!==undefined
&& changes.section.currentValue!==''){
}
}
afterPrint(){
console.log("after print");
this.ele.nativeElement.children[0].innerHTML = '';
this.sectionChange.emit('');
this.section = '';
}
printDiv() {
if(this.section && this.section != undefined && this.section!='') {
var printContents = document.getElementById(this.section).innerHTML;
var originalContents = document.body.innerHTML;
if(window){
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
var popup = window.open('', '_blank',
'width=600,height=600,scrollbars=no,menubar=no,toolbar=no,'
+'location=no,status=no,titlebar=no');
popup.window.focus();
popup.document.write('<!DOCTYPE html><html><head> '
+'<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" '
+'media="screen,print">'
+'<link rel="stylesheet" href="style.css" media="screen,print">'
+ '</head><body onload="window.print()"><div class="reward-body">'
+ printContents + '</div></html>');
popup.onbeforeunload = function (event) {
popup.close();
return '.\n';
};
popup.onabort = function (event) {
popup.document.close();
popup.close();
}
} else {
var popup = window.open('', '_blank', 'width=800,height=600');
popup.document.open();
popup.document.write('<html><head>'+
+'<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"'
+' media="all">'
+'<link rel="stylesheet" href="style.css" media="all">'
+'</head><body onload="window.print()">' + printContents + '</html>');
popup.document.close();
}
popup.document.close();
}
return true;
}
}
fetchStylesheets(){
var output:string= '';
for(var i=0;i<document.styleSheets.length;i++){
output = output +' <link rel="stylesheet" type="text/css" href="'+
window.document.styleSheets[0].href +'" /> ';
}
return output;
}
fetchscriptSheets(){
var output:string= '';
for(var i=0;i<document.scripts.length;i++){
output = output +' <script type="text/javascript" src="'+
window.document.scripts[0].src +'" /> ';
}
return output;
}
}
In the above component you may notice one things i am created a two methods fetch the stylesheets , scripts, but i didnt use it, if you want to use in the output to load the scripts in printing then you can added that in the execution .
using the print component in another employee component:, for more detail reference about the employee component
please refer previous post. for service and model data
import { Component } from '@angular/core';
import { DataService } from './data.service';
import { IUser } from './user'
@Component({
selector:'employee',
template:`
<div style="display:inline-block;width:400px;vertical-align:top">
<h1>Employee </h1>
<div>
<input type="text" #emp />
<button (click)="addEmployee(emp.value)"
class="btn btn-sm btn-primary">Add Emp</button>
<button (click)="getEmployee()"
class="btn btn-sm btn-primary">Get Employees</button>
<div style="margin-top:20px">
<ul class="list-group" style="display:-webkit-box;overflow-x:scroll">
<li class="panel list-group-item-primary"
*ngFor="let e of employees" style="list-style:none;">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{e.username}}</h3>
</div>
<div class=""panel-body>
<div class="text-info" style="padding:5px;">{{e.name}}
<span class="btn btn-sm btn-primary"
(click)="getAlbum(e.id)">Get Album</span></div>
<div class="text-primary" style="padding:5px;">
{{e.address.city}},{{e.address.zipcode}}</div>
<div *ngIf="e.albums">
<ul class="list-group">
<li class="list-group-item" *ngFor="let alb of e.albums">
<div class="panel panel-default">
<div class="panel-heading">{{alb.title}}</div>
<div class=""panel-body>
<img [src]="alb.thumbnailUrl" />
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
`
})
export class EmployeeComponent
{
employees:IUser[];
constructor(private dataservice:DataService){
}
addEmployee(employeeName)
{
this.dataservice.addEmployee(employeeName);
}
getEmployee(){
this.dataservice.getEmployees()
.subscribe(
customer=>this.employees=customer,
error=>console.log("error"+error)
);
}
getAlbum(id){
this.dataservice.getAlbums(id)
.subscribe(
albums=>this.employees.find(emp=>emp.id==id).albums = albums
);
}
}
When user click on the get album, it will fetch information about the particular user id's album , then click print button
Output:
After click the print button , the view of the print screen
From this post you can learn how to create a print component in the angular2 using the Typescript which will print the user defined element in the DOM
