I have a data table as below:
<table id="example2" class="table table-bordered table-striped table-fixed">
<thead>
<th>Key Account</th>
<th>Key Account Code</th>
<th>Potential Value</th>
<th>Sales Value</th>
<th>Penetration %</th>
<th>Potential (H/M/L)</th>
<th>Penetration (H/M/L)</th>
</thead>
<?php echo "Some data from database here";?>
</table>
and I have a button as
<button id="click" >Export Image </button>
How to download the above data table as image after clicking the button?
I have a data table as below:
<table id="example2" class="table table-bordered table-striped table-fixed">
<thead>
<th>Key Account</th>
<th>Key Account Code</th>
<th>Potential Value</th>
<th>Sales Value</th>
<th>Penetration %</th>
<th>Potential (H/M/L)</th>
<th>Penetration (H/M/L)</th>
</thead>
<?php echo "Some data from database here";?>
</table>
and I have a button as
<button id="click" >Export Image </button>
How to download the above data table as image after clicking the button?
Share Improve this question edited Dec 14, 2018 at 12:29 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Dec 13, 2018 at 8:43 AkshayaAkshaya 471 silver badge9 bronze badges 01 Answer
Reset to default 4Yes You can use html2canvas. You can then export it to an image. See the script below :
<html>
<head>
</head>
<body>
<table id="myTable" class="table table-bordered table-striped table-fixed">
<thead>
<th>Key Account</th>
<th>Key Account Code</th>
<th>Potential Value</th>
<th>Sales Value</th>
<th>Penetration %</th>
<th>Potential (H/M/L)</th>
<th>Penetration (H/M/L)</th>
</thead>
<?php echo "Some data from database here";?>
</table>
<button id="convert">
Convert to image
</button>
<div id="result">
<!-- Result will appear be here -->
</div>
<script type="text/javascript" src="https://github./niklasvh/html2canvas/releases/download/0.5.0-alpha1/html2canvas.js"></script>
<script>
//convert table to image
function convertToImage() {
var resultDiv = document.getElementById("result");
html2canvas(document.getElementById("myTable"), {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
result.innerHTML = '<a download="test.jpeg" href="'+img+'">test</a>';
}
});
}
//click event
var convertBtn = document.getElementById("convert");
convertBtn.addEventListener('click', convertToImage);
</script>
</body>
</html>