Hope you had a wonderful Christmas holiday!
Just to clarify, I am new to JS and may make some unconventional attempts in trying to download my Blob in PNG format.
I am facing an issue with exporting all the visual content of a DIV in either PDF or image format upon clicking a button(the div has a consistent class name).
After researching, I learned that I need to convert the div to canvas for downloading it. I attempted to modify the code from this discussion: How to take screenshot of a div with JavaScript?
However, despite various tweaks and tests, nothing happens when I click on the button... Here's a snippet 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 can offer insight into what might be going wrong or guide me in the right direction, I would greatly appreciate it :)