如何打印的代码

渲染我使用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(); 
     }

来源

2016-11-29 gina

你打算使用任何插件？ – Daerik

究竟是什么问题？这真的不清楚。 – Dekel

是的我打开使用任何插件，问题是，当我打印页面与HTML表中的字符然后图表是空白的，我只看到HTML表。 – gina

html2canvas

该脚本可以让你把网页或它的部分的 “截图”，直接在用户的浏览器。该屏幕截图基于DOM ，因此它可能不是100％准确的真实表示，因为其没有制作实际屏幕截图，而是根据页面上提供的信息构建屏幕截图。

jsPDF

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

FileSaver.js

FileSaver.js实现另存为（）在浏览器中本身不支持它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或任何插件的，但你必须直接使用目标画布没有任何HTML只是HTMLCanvasElement.toDataURL()方法：

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

来源

2016-11-29 22:28:32 Daerik

如何打印的代码

回答

相关问题