Question

我正在使用ChartJS库在运行时生成报告，在页面上我们还有一个打印按钮，按钮打印一个div：

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

我不认为我需要在此处粘贴代码来渲染图片，但它看起来很漂亮。

javacript是这样的：

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

Answer 1

<强> html2canvas

此脚本允许您拍摄＆＃34;屏幕截图＆＃34;的网页或部分它，直接在用户浏览器上。屏幕截图基于DOM 因此，它可能不是真实表示的100％准确没有制作实际的屏幕截图，而是基于构建屏幕截图页面上提供的信息。

<强> jsPDF

用于生成PDF的HTML5客户端解决方案。适合举办活动门票，报告，证书，你的名字！

<强> FileSaver.js

FileSaver.js在浏览器中实现saveAs（）FileSaver接口这本身并不支持它。有一个FileSaver.js demo 演示了如何保存各种媒体类型。

将所有内容放在一起并使用jQuery绑定您的操作。这将生成可以保存，打印或查看的PDF。

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

仅限使用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>

您可以在不使用jQuery或任何插件的情况下执行此操作，但是您必须使用HTMLCanvasElement.toDataURL()方法直接定位画布而不使用任何HTML：

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

如何打印由代码

1 个答案: