如何打印的代碼

渲染我使用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

如何打印的代碼

回答

相關問題