Why is html2canvas not defined?

Question

If I'm calling this function, getting always "html2canvas is not defined".

makeScreenshot: function(button)
{
    debugger;
    html2canvas(document.body, {
        Uncaught ReferenceError: html2canvas is not defined
        onrendered: function(canvas) {
            document.body.appendChild(canvas);
        }
    });
},

but why? I have a class of it... like in tutorial written about it. Does anyone have a solution?

I suppose I need to include html2canvas here, but I don't know how.

Ext.define("TEST.controller.Desktop", {
    extend: "Ext.app.Controller",

    views: [
        "desktop.Desktop",
        //"desktop.TaskBar",
        "desktop.Toolbar",
        "desktop.DataprovidersDataView",
        "configuration.UploadFileWindow"
    ],

refs: [{
    ref: "viewport",
    selector: "viewport"
}, {

Answer 1

Ext doesn't know anything about classes not defined as part of it's class system, you need to include the JS file using a script tag in your html.

Answer 2

If it's a Node.js application, try importing using the following code in the JS file in which the function's used:

import html2canvas from 'html2canvas';
// Or
const html2canvas = require('html2canvas');

For react, vuejs, or Angular2+ applications, you can use the following in your JS or TS file:

import html2canvas from 'html2canvas';

Answer 3

You need to include required library, in my case:

1. plugins\export\libs\blob
2. plugins\export\libs\classList
3. plugins\export\libs\blob\fabric.js
4. plugins\export\libs\blob\jszip
5. plugins\export\libs\blob\pdfmake
6. plugins\export\libs\blob\xlsx