Print HTML Div in JavaScript using HTML2canvas

Print HTML Div in JavaScript using HTML2canvas

I am sharing JavaScript Code, how to print HTML Div, Class, Section using HTML2canvas.

/* install html2canvas plugin */

First we need to add dependencies in package.json file:

• @types/html2canvas: ^0.5.32
• html2canvas: 0.5.0-beta4

/* run npm install command */
npm install

/* add ng-material print icon */

<a><md-icon (click)="printPage()">print</md-icon></a>

/* create printPage function */

function printPage() {

    html2canvas( < HTMLElement > document.getElementsByClassName("content")[0]).then(

        function (canvas) {

            var myImage = new Image();

            myImage.src = canvas.toDataURL("image/png");

            var w = window.open("", "print");

            w.document.body.appendChild(myImage);

            setTimeout(function () {

                w.focus();

                w.print();

                w.close();

            },

            500

        );

    });

}