jsPDF Chart.js Tutorial to Export Colorful Bar Chart Using Boostrap 4 in Javascript

jsPDF Chart.js Tutorial to Export Colorful Bar Chart Using Boostrap 4 in Javascript

<!DOCTYPE html>
<html>
<head>
    <title>CANVAS2PDF</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body class="text-center" style="background-color: #f5f5f5;">
    <div class="container" style="margin-top: 50px;">
        <div class="row">
            <div class="col border">
                <canvas id="bar-chart" style="width: 100%;"></canvas>
                <button type="button" id="btn-download" class="btn btn-primary">Save to PDF</button>
            </div>
        </div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script type="text/javascript">
    new Chart(document.getElementById("bar-chart"), {
        type: 'bar',
        data: {
            labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
            datasets: [
                {
                    label: "Population (millions)",
                    backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
                    data: [2478,5267,734,784,433]
                }
            ]
        },
        options: {
            layout: {
                padding: 10
            },
            legend: { 
                display: false 
            },
            title: {
                display: true,
                text: 'Predicted world population (millions) in 2050'
            }
        }
    });

    // https://github.com/gillyb/reimg/blob/master/reimg.js
    function downloadImage(data, filename="untitled.jpeg") {
        var a = document.createElement('a');
        a.href = data;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
    }

    function downloadAsPdf(data, filename="untitled.pdf") {
        var pdf = new jsPDF('landscape');
        pdf.setFontSize(20);
        pdf.text(15, 15, "Some chart");
        pdf.addImage(data, 'JPEG', 10, 10, 280, 150 );
        pdf.save(filename);
    }

    document.getElementById('btn-download').addEventListener("click", function(e) {

        var chartCanvas = document.querySelector('#bar-chart');

        // ...............
        // https://stackoverflow.com/a/19539048/2732184
        //create a dummy CANVAS - with white bg
        dummyCanvas = document.createElement("canvas");
        dummyCanvas.width = chartCanvas.width;
        dummyCanvas.height = chartCanvas.height;

        dummyCanvasCtx = dummyCanvas.getContext('2d');

        //create a rectangle with the desired color
        dummyCanvasCtx.fillStyle = "#FFFFFF";
        dummyCanvasCtx.fillRect(0, 0, chartCanvas.width, chartCanvas.height);

        //draw the original canvas onto the destination canvas
        dummyCanvasCtx.drawImage(chartCanvas, 0, 0);
        // ...............

        var chartDataURL = dummyCanvas.toDataURL("image/jpeg", 1.0);

        // downloadImage(chartDataURL, 'bar-chart.jpeg');

        downloadAsPdf(chartDataURL, 'bar-chart.pdf');
    });
</script>
</body>
</html>

Leave a Comment