First of all, I hope you had a good Christmas holiday!
I specify that I am a beginner in JS, hence my possible eccentric attempts to try to download my Blob in PNG.
My problem is to export all the graphic content of a DIV in pdf or image format by clicking on a button(the class name of the div is always the same)
After some research I understood that I had to convert the div to canva to be able to download it.
I tried to adapt the code from this post:
How to take screenshot of a div with JavaScript?
But when I click on the button nothing happens despite my various modifications and tests …
Here is a preview of my code :
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Export Visualisation QS</title>
</head>
<body>
<div class="qvt-sheet-container">
<h1>EXPORT PNG</h1>
<img src="Logo-Qlik.png">
</div>
<a id="link"><button id="btn-export-qs">Export PNG</button></a>
</body>
<script language="JavaScript" type="text/javascript" src="jquery-3.6.0.min.js">
var a = document.getElementById("link");
function export_feuille() {
$("#btn-export-qs").click(function() {
html2canvas($(".qvt-sheet-container"), {
onrendered: function(canvas) {
//theCanvas = canvas;
canvas.toBlob(function(blob) {
//saveAs(blob, "Dashboard.png");
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = "export_qs.png";
a.click();
window.URL.revokeObjectURL(url);
});
}
});
});
};
document.getElementById("btn-export-qs").addEventListener ("click", export_feuille, false);
</script>
</html>
If anyone could educate me on what is wrong or point me in a direction I would be very grateful 🙂