Download a Blob in PNG Format

Question

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 :)

I don't think should have been closed as a dupe of an inline script question, and now I can't add my answer. But here's what I did (no libraries): https://stackoverflow.com/a/72211735/4946681 — Nate, May 12 '22 at 07:41

score 1 · Accepted Answer · answered Dec 29 '21 at 06:50

As far as I see some of the code in your code is redundant.

In your code

document.getElementById("btn-export-qs").addEventListener ("click", export_feuille, false);

The above code means you have added click event for the button. When the button is clicked it calls the export_feuille function, in export_feuille you use jQuery to do this again, which is not reasonable.

You wrap a <button> in <a>, When the button is pressed will use the a tag to trigger the download event, you don't need to. Try the following:

Html: I removed <a>

<div class="qvt-sheet-container">
    <h1>EXPORT PNG</h1>
    <img src="your-image.jpg" style="width: 150px;height: 150px">
</div>

<button id="btn-export-qs">Export PNG</button>

Javascript:

$("#btn-export-qs").click(function () {
    html2canvas(
        document.querySelector('.qvt-sheet-container'),
        {
            allowTaint: true,
            useCORS: true
        }
    ).then(canvas => {
        download(canvas)
    })
});

const download = function (canvas) {
    const link = document.createElement('a');
    link.download = 'filename.png';
    link.href = canvas.toDataURL()
    link.click();
}

Full code here

Download a Blob in PNG Format

1 Answers1