Search code examples
javascriptamchartsjspdfhtml2canvasamcharts4

How to get full image from div that containing amchart4 and convert into pdf to be downloaded?

I'm trying to convert a div that contains amcharts4 into images and put it to pdf and download it.

But when it is saved into pdf, the amcharts4 is cropped, as in pictures

enter image description here

this is the actual div

enter image description here

nb: even through i'm using metronic template, i'm not using amcharts4 from metronic's one

this is my code when print button is triggered

const filename  = 'ThisIsYourPDFFilename.pdf';

        html2canvas(document.querySelector('.m-content')).then(canvas => {
            let pdf = new jsPDF();
            pdf.addImage(canvas.toDataURL('image/png'), 'JPEG', 0, 0, 211, 298);
            pdf.save(filename);
        });

and this the external script that i included

<script src="http://html2canvas.hertzen.com/dist/html2canvas.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.5.3/jspdf.debug.js"></script>

any suggestions?

Solution

  • amCharts have their own builtin chart to PDF export feature. Please check the basics here.

    It's possible to have multiple charts added to the same PDF file as shown here.

    Now if you really need to use html2canvas you could likely still get the image using the export feature and then add the Base64 image to your file:

    var imgData = chart.exporting.getImage("png");