<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
#container {
min-width: 310px;
max-width: 800px;
margin: 0 auto
}
td {
padding: 1rem;
background: blue;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.35.5/apexcharts.min.js" integrity="sha512-K5BohS7O5E+S/W8Vjx4TIfTZfxe9qFoRXlOXEAWJD7MmOXhvsSl2hJihqc0O8tlIfcjrIkQXiBjixV8jgon9Uw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<span onclick="DownloadChart()" style="background: #ffd800; padding: 1rem; color: #fff; cursor: pointer;">Download</span>
<div id="container">
<table style="width: 100%;">
<tr>
<td>3</td>
<td>4</td>
<td>6</td>
<td>5</td>
<td>8</td>
</tr>
</table>
<h2 style="text-align: center; background: #ffd800; padding: 2rem; margin-bottom: 1rem;">This is apexchart download as image using html2canvas library!!</h2>
<div id="chart"></div>
</div>
</div>
</form>
<script>
var options = {
series: [{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43]
}, {
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27]
}, {
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14]
}, {
name: 'PRODUCT D',
data: [21, 7, 25, 13, 22, 8]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
plotOptions: {
bar: {
horizontal: false,
borderRadius: 10
},
},
xaxis: {
type: 'datetime',
categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
'01/05/2011 GMT', '01/06/2011 GMT'
],
},
legend: {
position: 'right',
offsetY: 40
},
fill: {
opacity: 1
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
function DownloadChart() {
alert("Download chart !");
setTimeout(function () {
generateCanvas();
}, 1000);
}
function generateCanvas() {
html2canvas(document.querySelector("#container")).then(canvas => {
var imgData = canvas.toDataURL("image/jpeg", 1.0);
//$("#canvas_container").attr("src", imgData);
var a = document.createElement("a"); //Create <a>
a.href = imgData; //Image Base64 Goes here
a.download = "Image.png"; //File name Here
a.click(); //Downloaded file
});
}
</script>
</body>
</html>
No comments:
Post a Comment