html2pdf

    function replaceGraphs() {
        var cDoc = $("#PDFInterstitial")[0].contentDocument;
        var graphs = cDoc.getElementsByTagName('canvas');
        graphs = [].slice.call(graphs);
        CanvasPngCompression.replaceToDataURL();
        for (var i = 0; i < graphs.length; i++) {

            var image = cDoc.createElement('img');
            var canvas = graphs[i];


            var base64img = canvas.toDataURL("image/png", 0.7);
            image.src = base64img;
            image.style.height = '750px';
            image.style.width = '750px';
            graphs[i].parentElement.replaceChild(image, graphs[i]);



            var sizeInBytes = 4 * Math.ceil((base64img.length / 3)) * 0.5624896334383812;
            var sizeInKb = sizeInBytes / 1000;
            console.log("Image Size in Kb: " + sizeInKb);

        }
        CanvasPngCompression.revertToDataURL();
    }
    var createPDFFromHtml = function (evt) {
        var htmlButton = $(evt.target).closest("button");
        var url = htmlButton.data("href");
        var scale = 3;
        var iframe = $("#PDFInterstitial");
        var contents = iframe.contents();
        var frame = iframe[0];
        var contentWindow = frame.contentWindow;
        var pixelRatio = contentWindow.devicePixelRatio;

        contentWindow.devicePixelRatio *= scale;
        iframe.off("load").on("load", function () {
            getPDF(iframe);
        });
        iframe.attr("src", url);

        var getPDF = function () {
            var reportName = $("#TabContainer").data("name");
            $("#ajaxSpinnerContainer").show();
            global.replaceGraphs();
            var opt = {
                margin: 10,
                filename: reportName + ".pdf",
                html2canvas: { scale: scale, letterRendering: true, logging: true },
                jsPDF: { unit: "mm", format: 'A4', compress: true, orientation: 'portrait', putOnlyUsedFonts: true },
                pagebreak: { mode: 'avoid-all', after: '.tabpage' }
            };

            $("#PDFInterstitial").css("display", "block");
            contents = $("#PDFInterstitial").contents();
            var element = contents.find("html").html();

            //This will implicitly create the canvas and PDF objects before saving.
            html2pdf().from(element).set(opt).toPdf().get("pdf").then(function (pdf) {

                var totalPages = pdf.internal.getNumberOfPages();

                for (let i = 1; i <= totalPages; i++) {
                    pdf.setPage(i);
                    pdf.setFontSize(10);
                    pdf.setTextColor(150);
                    pdf.text(`Page ${i} of ${totalPages}`,
                        pdf.internal.pageSize.getWidth() - 100,
                        pdf.internal.pageSize.getHeight() - 10);

                }
                contentWindow.devicePixelRatio = pixelRatio;
                iframe.empty();
                $("#ajaxSpinnerContainer").hide();
            }).save();

        };


    };