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"
}, {

Reinaldoreinaldos

How are you including html2canvas on your page? How are you including your own code on your page? – Gurney

I just added html2canvas.js into my classes, and calling html2canvas as method from desktop Controller... – Reinaldoreinaldos

Can you post some code? For instance, how did you include html2canvas within your html page? – Helyn

I'm working with Ext.JS and don't have a html pages. But i will show what I am doing... – Reinaldoreinaldos

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.

Riarial

but i dont have any peace of html in my project, its all just extjs.... can i inlclude it with extjs? – Reinaldoreinaldos

Of course you have html in your project. Which page do you navigate to when you're running it? That's where you need to include it. – Riarial

hahaha i am sometimes so stupid.. i forgot about index.html in my project. thanks! – Reinaldoreinaldos

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';

Mid

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

Timbrel