Chartjs-How to print a chart rendered by code

by

3đź‘Ť

html2canvas

This script allows you to take “screenshots” of webpages or parts of
it, directly on the users browser. The screenshot is based on the DOM
and as such may not be 100% accurate to the real representation as it
does not make an actual screenshot, but builds the screenshot based on
the information available on the page.

jsPDF

A HTML5 client-side solution for generating PDFs. Perfect for event
tickets, reports, certificates, you name it!

FileSaver.js

FileSaver.js implements the saveAs() FileSaver interface in browsers
that do not natively support it. There is a FileSaver.js demo that
demonstrates saving various media types.

Put it all together and use jQuery to bind your actions. This will generate a PDF that can either be saved, printed, or viewed.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/html2canvas.js"></script>
<script src="/path/to/jspdf.min.js"></script>
<script src="/path/to/FileSaver.min.js"></script>
<script>
    $('#btnPrint').on('click', function(event) {
        event.preventDefault();
        html2canvas($('#printThis'), {
            onrendered: function(canvas) {
                var imgData = canvas.toDataURL('image/jpeg');
                var doc = new jsPDF('landscape');
                doc.addImage(imgData, 'JPEG', 15, 45, 270, 125);
                doc.save('download.pdf');
                return false;
            }
        });
    });
</script>

For just print only using html2canvas:

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/html2canvas.js"></script>
<script>
    $('#btnPrint').on('click', function(event) {
        event.preventDefault();
        html2canvas($('#printThis'), {
            onrendered: function(canvas) {
                var imgData = canvas.toDataURL('image/jpeg'); 
                var windowContent = '<!DOCTYPE html>';
                windowContent += '<html>'
                windowContent += '<head><title>Print canvas</title></head>';
                windowContent += '<body>'
                windowContent += '<img src="' + imgData + '">';
                windowContent += '</body>';
                windowContent += '</html>';
                var printWin = window.open('', '', 'width=340,height=260');
                printWin.document.open();
                printWin.document.write(windowContent);
                printWin.document.close();
                printWin.focus();
                printWin.print();
                printWin.close();
                return false;
            }
        });
    });
</script>

You could do this without the use of jQuery or any plugins, but you’ll have to target the canvas directly without any HTML using just the HTMLCanvasElement.toDataURL() method:

<script>
    document.getElementById('btnPrint').onclick = function () {
        var imgData = document.getElementById('graficaMedidas').toDataURL('image/jpeg');
        var windowContent = '<!DOCTYPE html>';
        windowContent += '<html>'
        windowContent += '<head><title>Print canvas</title></head>';
        windowContent += '<body>'
        windowContent += '<img src="' + imgData + '">';
        windowContent += '</body>';
        windowContent += '</html>';
        var printWin = window.open('', '', 'width=340,height=260');
        printWin.document.open();
        printWin.document.write(windowContent);
        printWin.document.close();
        printWin.focus();
        printWin.print();
        printWin.close();
    }
</script>

Leave a comment