javascriptjquerychart.jschartjs-2.6.0

Print chart using chart js


I am using Chart JS library to create charts https://www.chartjs.org/

Say I have the below code

 <div class="card-body ">
        <canvas id="bidStatus"></canvas>
  </div>

Using the FileSaver.js I am able to save the chart using the below code

function DownloadImage() {
    $("#bidStatus").get(0).toBlob(function (blob) {
        saveAs(blob, "BidStatus.png");
    });
}

But I am not sure how I can print the chart. Don't see any native API call to do that. Can some one please tell me how I can achieve this.

I tried using jquery print libraries which are mentioned in the Print an HTMl element example but they don't seem to load the chart generated using Chart js. I get a blank page for printing.

Thanks


Solution

  • This function prints the contents of a Canvas correctly

    function PrintImage() {
        var canvas = document.getElementById("bidStatus");
        var win = window.open();
        win.document.write("<br><img src='" + canvas.toDataURL() + "'/>");
        win.print();
        win.location.reload();
    
    }