html2canvas to render document PDF with css styling using angular2/typescript

khalil _diouri picture khalil _diouri · Aug 17, 2016 · Viewed 14k times · Source

How to generate an output file PDF using html2canvas with angular2

I tried to import the file html2canvas typescript and made a declaration like this to use it

declare let html2canvas: Html2CanvasStatic;

but I get html2canvas is not defined

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

I found this file typescript on github html2canvas typescript

how can use this for my application angular2

Answer

mszalbach picture mszalbach · Oct 25, 2016

I could use html2canvas with the followings changes:

package.json:

 "dependencies": {
     "html2canvas": "0.5.0-beta4",
     "@types/html2canvas": "0.5.32",
 }

After using npm install I could use html2canvas in my component.ts files like this:

import * as html2canvas from "html2canvas"

test() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
        var img = canvas.toDataURL()
        window.open(img);
     }
    });

}

Without installing @types/html2canvasI could use the lib via require but not via the import:

html2canvas = require('hmtl2canvas');