Hello,
in this tutorial I explain how you can print a Div/Page and so on in your Browser.
Features:
- SVG Files Support
- IMG Files Support
- Background and Layers also Supported
So lets get started:
First of all you need this NPM Plugin: https://github.com/tsayen/dom-to-image
So do:
npm install dom-to-image
After that create a provider. We call it print-provider. So do:
ionic generate provider print
After that create a print function in your provider like this:
import { Injectable } from '@angular/core';
import domtoimage from 'dom-to-image';
@Injectable()
export class PrintProvider{
constructor() {}
print(componentName) {
var node = document.getElementById(componentName);
domtoimage.toPng(node)
.then(function (dataUrl) {
var popup=window.open();
popup.document.write('<img src=' + dataUrl + '>');
popup.document.close();
popup.focus();
popup.print();
popup.close();
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
}
}
PS: As classname you can name it whatever you want.
So for now your print provider is ready. So then go into your .ts file where you want to print something. I.E. home.ts.
Import your provider like this:
import { PrintProvider} from "../../providers/print/print";
Initialize it in the constructor like this:
constructor(public navCtrl: NavController,
...
private printService: PrintProvider) { }
PS: Be sure to use the same className as in your provider.
Now create a print function like this in your home.ts:
print(componentName) {
this.printService.print(componentName);
}
and finally in your .html file create a button to trigger the print function and a div with content in it which you want to print. In example we put a printer button in the header of the html and a list with the id=“tablelist”.
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>HomePage</ion-title>
<ion-buttons end>
<button ion-button (click)="print('tablelist')">
<ion-icon name="print"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list id="tablelist">
<ion-item>
//some content here
</ion-item>
</ion-list>
</ion-content>
So how does it work?
The print button gives the parameter(id of the listview) to the print function in home.ts. This print function gives the parameter to the provider and the provider gets the list through the ID and converts it into a base64. The base64 gets printed in a new page as image and opens the print alert which ask the user how he want to save it.
Why do we use a provider?
Simply because you can now use this print function in every ts file you want.
GitHub Project:
Here is the full and free GitHub Project. Just download and compile it! 
Youtube Showcase: