Chart.jscanvasesでHTMLコンテンツをPDFにエクスポート

Question

chart.jsで生成された約10枚のグラフがあるHTMLページがあります（これらはキャンバス要素です）。私は、PDFファイルにページのコンテンツをエクスポートできるようにしたい。

私はjsPDFの.fromHTML関数を使用しようとしましたが、キャンバスの内容のエクスポートをサポートしていないようです。 （どちらか、それとも間違っているのか）。私はちょうどのような何かをした：

$(".test").click(function() { 
    var doc = new jsPDF() 

    doc.fromHTML(document.getElementById("testExport")); 
    doc.save('a4.pdf') 
}); 

いずれかの代替アプローチがあります。

Answer 1

あなたはjsPDFとともに、html2canvas（キャンバスのエクスポートをサポートし、HTML要素のよりよい表現を得るために）を使用する必要があります。ここで

例です。

var chart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
     labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], 
 
     datasets: [{ 
 
     label: 'DST', 
 
     data: [3, 1, 4, 2, 5], 
 
     backgroundColor: 'rgba(0, 119, 290, 0.2)', 
 
     borderColor: 'rgba(0, 119, 290, 0.6)', 
 
     fill: false 
 
     }] 
 
    }, 
 
    options: { 
 
     scales: { 
 
     yAxes: [{ 
 
      ticks: { 
 
       beginAtZero: true, 
 
       stepSize: 1 
 
      } 
 
     }] 
 
     } 
 
    } 
 
}); 
 

 
function saveAsPDF() { 
 
    html2canvas(document.getElementById("chart-container"), { 
 
     onrendered: function(canvas) { 
 
     var img = canvas.toDataURL(); //image data of canvas 
 
     var doc = new jsPDF(); 
 
     doc.addImage(img, 10, 10); 
 
     doc.save('test.pdf'); 
 
     } 
 
    }); 
 
}

#chart-container { 
 
    background: white; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> 
 

 
<div id="chart-container"> 
 
    ChartJS - Line Chart 
 
    <canvas id="ctx"></canvas> 
 
</div><br> 
 
<button onclick="saveAsPDF();">save as pdf</button>