Html2canvas ASP.NET Core

Question

I am trying to add html2canvas to my ASP.NET Core web site.

In the documentation, they say to use:

npm install html2canvas

When I execute this command, the html2canvas is installed in:

myproject/src/myproject/node_modules

When I try to use the methods of html2canvas, the following error occurs in the browser console:

html2canvas is not defined

So I manually added the file html2canvas.js in my project and referenced the same on the page html desired. html2canvas is not defined no longer appeared, but the page is not rendered correctly using the commands of html2canvas.

var element = document.getElementById("divPrint");

html2canvas(element).then(function(canvas) {
    // Export the canvas to its data URI representation
    var base64image = canvas.toDataURL("image/png");

    // Open the image in a new window
    window.open(base64image , "_blank");
});

What is the correct way to install? Via npm or just adding the file .js?

Could someone explain to me?

Answer 1

Whereas you are only using NPM, there are some possibilities to use the downloaded Packages.

Note that downloading Packages is just one of the tasks that NPM offers to optimize repetitive tasks when creating a website.

Come on:

1. copy the compiled file(s) into your sources (many Packages come with the creation, testing and distribution files)
2. link directly to the compiled file, in your example it would be something like

<script src="../node_modules/html2canvas/html2canvas.js"></script>

The two approaches work, but see which one will be better when you want to upgrade the Packages.