无法通过 html2canvas 下载多个 HTML 元素

Question

I am trying to make a quote download system with div by html2canvas. But I have tried to make this system through this process. But it is not working.

Here are the Html multiple elements:

    **First div:**
    <div class="htmltoimage" style="background-color: skyblue;">
        <!-- <img width="100px" src="raj2.jpg"> -->
        <h1>Dhaka</h1>
        <button onclick="downloadimage()" class="clickbtn">Download This</button>
    </div>

    **First div:**
    <div class="htmltoimage" style="background-color: skyblue;">
        <!-- <img width="100px" src="raj2.jpg"> -->
        <h1>Dhaka</h1>
        <button onclick="downloadimage()" class="clickbtn">Download This</button>
    </div>

Here is the html2canvas code:

function downloadimage() {
        var container =  $(this).closest('.htmltoimage');
       
        html2canvas(container, {allowTaint: true}).then(function (canvas) {

            var link = document.createElement("a");
            document.body.appendChild(link);
            link.download = "html_image.jpg";
            link.href = canvas.toDataURL();
            link.target = '_blank';
            link.click();
            
        });
    }

Note: I have included the JQuery file and html2canvas link. When someone clicks on the first div to download at this time only this div will be downloaded. So on, and so on, and so on.....

Answer 1

Here's what I tried, You can download whole or one by one upon clicking on each element.

You need to select all the elements to download and then you can make a bunch download or fire Event Listener to get download one after other.

 function download(url) { var a = $("<a style='display:none' id='js-downloder'>").attr("href", url).attr("download", "test.png").appendTo("body"); a[0].click(); a.remove(); } function saveCapture(element) { html2canvas(element).then(function(canvas) { download(canvas.toDataURL("image/png")); }) } var elements = document.querySelectorAll("#capture"); elements.forEach(function(element) { element.addEventListener('click', function() { saveCapture(element); console.log(saveCapture(element)); }) }) //to download all $('#btnDownload').click(function() { var elements = document.querySelectorAll("#capture"); elements.forEach(element => { saveCapture(element); }) })

 @import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700'); .mainContainer { width: 500px; height: 600px; display: flex; align-items: center; flex-flow: column; gap: 20px; margin: 0 auto; } #capture { margin: 0 auto; width: 100%; height: 100px; overflow: hidden; } textarea { width: 100%; padding: 2rem.5rem; border: 0; text-align: center; color: #fff; background: slateblue; font-family: 'Noto Sans', sans-serif; font-weight: 700; font-size: 2rem; line-height: 1.5; resize: none; max-height: 100%; min-height: 100%; } #btnDownload { background-color: pink; border: none; color: #000; padding: 15px 32px; text-align: center; text-decoration: none; font-size: 16px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mainContainer"> <a href="#" class="" id="btnDownload">Download</a> <div id="capture"> <textarea maxlength="110">Click to edit...</textarea> </div> <div id="capture"> <textarea maxlength="110">Click to remove...</textarea> </div> </div>

You can give it a try, it should work.