JSFiddle - React, Tailwind, and code Playground
HTML
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.js"></script>
</head>
<div id='html-template'>
<div id='chartContainer' style='height: 300px; width: 100%;'></div>
<button id="exportButton" class="btn btn-primary " type="button" onclick="convertHTMLToPDF()">Export as PDF</button>
</div>
JavaScript
var chart2 = new CanvasJS.Chart("chartContainer", {
title: {
text: "Spline Chart"
},
data: [
{
type: "spline",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
}
]
});
chart2.render();
function convertHTMLToPDF() {
const { jsPDF } = window.jspdf;
var doc = new jsPDF('l', 'mm', [1200, 1810]);
var pdfjs = document.querySelector('#html-template');
doc.html(pdfjs, {
callback: function(doc) {
doc.save("output.pdf");
},
x: 10,
y: 10
});
//doc.output('dataurlnewwindow');
}