CODEWITHSUNDEEP
javascriptphphtml
Minirock
Minirock

Reputation: 666

Export pdf from dynamic html

I have dynamic elements in my html loaded with my javascript. (Things like charts by example). I would like to export those charts into pdf. But when I try I don't have them, I only have my static html like the h5

You can see in the example bellow, the canvas part is empty and then loaded using Chart.js.

<div id="stats">                
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title text-uppercase">Nombre adherents / mois</h5>
            <canvas id="myChartInscription"></canvas>
        </div>
    </div>
</div>
<a class="btn btn-primary" id="exportPDF" href="#">Export PDF</a>
<div id="editor"></div>

This is what I'm trying

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<script>

    var doc = new jsPDF();
    var specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true;
        }
    };

    $('#exportPDF').click(function () {
        doc.fromHTML($('#stats').html(), 15, 15, {
            'width': 170,
            'elementHandlers': specialElementHandlers
        });
        doc.save('stats.pdf');
    });

</script>

Thanks for your help.

Upvotes: 0

Views: 496

Answers (1)

Daniele Dolci
Daniele Dolci

Reputation: 884

You have to save the canvas as data url, because "fromHtml" of jsPdf doesn't support canvas render.

Upvotes: 1

Related Questions