[Ionic Tutorial] Print a current Page/Div with Css applied

@reinerluke97 wrote:

Hello,
in this tutorial I show 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 PrintService {
  constructor(private http:Http,
    public loadingCtrl: LoadingController) {}

    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 { PrintService } from "../../provider/printService";

Initialize it in the constructor like this:

constructor(public navCtrl: NavController,
    ...
    private printService: PrintService) { }

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 #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.

Why do we use a provider?
Simply because you can now use this print function in every ts file you want.

Posts: 1

Participants: 1

Read full topic