html2canvas callback Onrendered doesn't work in Angular 2

Question

In Angular 2 project, I have installed the html2canvas module with version number 0.5.0beta.

Then in my TS file, I have import it as:

import html2canvas from 'html2canvas';

Then in my pdfDownload method, that I have written,

html2canvas (document.getElementById('exportthis'), {
                        onrendered : function (canvas) { 

After this, when I execute the npm start command, I got error like,

onrendered is not a property defined in html2canvasOptions.

Can anybody help me resolving this issue? This is the first time I am working on angular 2 and html2canvas.

Answer 1

Probaby you use html2canvas 0.5 version. onrendered was used in 0.4 and older versions. html2canvas 0.5 was rewriten to use Promises. You have to change

html2canvas (document.getElementById('exportthis'), { onrendered : function (canvas) {

to

html2canvas(document.getElementById('exportthis')).then(function (canvas) {

Answer 2

I faced similar problem.

I was able to solve it by declaring the option object outside html2canvas function call. Something like. This prevent the TS compiler from checking for the passed option object for internals.

var obj = {
  onrendered: function (canvas) {
    var imgData = canvas.toDataURL("image/png");
  }
};
  html2canvas(document.getElementById("exportthis"), obj);

EDIT:
After upgrade of typescript to 2.4.0 , if you get below error

TS2559: Type '{ onrendered: (canvas: any) => void; }' has no properties in common with type 'Html2CanvasOptions'.

then add any of Html2CanvasOptions property like logging: false

obj = {
  onrendered: function (canvas) {
    var imgData = canvas.toDataURL("image/png");
  },
  logging: false
};
  html2canvas(document.getElementById("exportthis"), obj);