score: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>

Related Query

More Query from same tag