CODEWITHSUNDEEP
javascriptjqueryhtmlcsschart.js
gina
gina

Reputation: 179

How to print a chart rendered by code

I am using ChartJS library to generate a report at runtime, and on the page we also have a print button, the button prints a div:

<div id="printThis">
    <h3 id="titulo_grafica"></h3>
    <canvas id="graficaMedidas" width="200" height="100"></canvas>
</div>

I dont think I need to paste the code here to render the picture, but its a nice looking line chart.

the javacript is this:

  document.getElementById("btnPrint").onclick = function () {
            printElement(document.getElementById("printThis"));
            printElement(document.getElementById("printThis2"), true, "<hr />");
            window.print();
        }

Upvotes: 0

Views: 5104

Answers (1)

Daerik
Daerik

Reputation: 4277

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>

Upvotes: 3

Related Questions