Call functions from a plain javascript library 1-Declare the javascript to index.html example :
1
2
3
4
//use of https://github.com/MrRio/jsPDF
//index.html
2-At the x.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Component } from '@angular/core';
//http://stackoverflow.com/a/40750232
declare var jsPDF: any;
export class AppComponent {
save_pdf(){
var imgData = this.canvas.toDataURL('png'); //another component
//here understands the jsPDF from the loaded JS
var pdf = new jsPDF('p', 'mm', [297, 210]);
pdf.addImage(imgData, 'JPEG', 5, 5);
pdf.save("test.pdf");
}
}
Another thing to point out here, when we instantiate the class variable. We using the ngAfterViewInit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//use of http://fabricjs.com/
//The x.component.ts become :
import { Component, AfterViewInit } from '@angular/core';
declare var fabric: any;
export class AppComponent implements AfterViewInit {
private canvas;
//instantiate the canva!
ngAfterViewInit() {
//https://embed.plnkr.co/y2WwmF2Y80cFNlatR7rb/
this.canvas = new fabric.Canvas('canvasELEMENT', {
preserveObjectStacking: true,
backgroundColor:"red"
});
}
}
//The x.component.html
<canvas id="canvasELEMENT" width="600" height="600"></canvas>
origin - http://www.pipiscrew.com/?p=7419 use-of-javascript-libraries-to-angular-component