html2canvas not working for large HTML content

[brittanyrutherford]

I am trying to use html2canvas library, to save html that's dynamically generated and output to the page as image. If the HTML generated isn't too much, then the html2canvas would work just fine, however, if the html generated is really too big (when I try to print it, it's 70 pages), then the html2canvas will return a canvas object where canvas.toDataURL('image/png') returns data:; and that's it.

I found a post online suggesting to change the maxInt in the html2canvas.js file to be Number.MAX_VALUE, but that didn't work as well.

Is there a way to workaround this issue? I will need this image to eventually pass it to jspdf library to generate a pdf document.

[chubbard]

You may want to make sure the canvas it creates is within the limitations per browser. See the FAQ:

https://html2canvas.hertzen.com/faq

Each browser has a max size canvas it will create and html2canvas can't do anything about that. So if it's generating fine for smaller sizes, but fails when the content gets too big it could be you running up against these limits.

Check the console as it logs out the size of the canvas it allocates:

html2canvas: Canvas renderer initialized (1024x1934 at 0,0) with scale 1

[vinodkrishnamps]

Please let me know whether you found a solution. i am getting slowness on generating the Image and converting it into PDF

[monicse09ku]

Dear @chubbard, I get Canvas renderer initialized (0x0 at 0,0) with scale 1 on console even though my div is

<div id="capture" style="padding: 10px; background: #f5da55; height: 200px">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

nothing below works then. Could you Please tell me what I am missing. TIA

[ZengZhenfei]

I hava same issue! if print 15 pages,it works fine,but my target is print 30 pages,the last 15 pages are blank,please let us know whether you found a solution.

[vinodkrishnamps]

I hava same issue! if print 15 pages,it works fine,but my target is print 30 pages,the last 15 pages are blank,please let us know whether you found a solution.

Hi, unable to resolve that issue. so we cancelled that approach. From backend using java & itext we created the PDF.

[zoubeihua]

有什么解决方案吗 我现在生成30页后面几张是加载img图片全是空白页

[AkshayKnorr]

HTML2canvas is still not working for large data. please share the solution

this is the code that I am trying

    <tr>
        <td>1</td>
        <td>John Hammond</td>
        <td>United States</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Mudassar Khan</td>
        <td>India</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Suzanne Mathews</td>
        <td>France</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Robert Schidner</td>
        <td>Russia</td>
    </tr>
    <tr>
        <td>1</td>
        <td>John Hammond</td>
        <td>United States</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Mudassar Khan</td>
        <td>India</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Suzanne Mathews</td>
        <td>France</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Robert Schidner</td>
        <td>Russia</td>
    </tr>
    <tr>
        <td>1</td>
        <td>John Hammond</td>
        <td>United States</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Mudassar Khan</td>
        <td>India</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Suzanne Mathews</td>
        <td>France</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Robert Schidner</td>
        <td>Russia</td>
    </tr>
    <tr>
        <td>1</td>
        <td>John Hammond</td>
        <td>United States</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Mudassar Khan</td>
        <td>India</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Suzanne Mathews</td>
        <td>France</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Robert Schidner</td>
        <td>Russia</td>
    </tr>
    <tr>
        <td>1</td>
        <td>John Hammond</td>
        <td>United States</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Mudassar Khan</td>
        <td>India</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Suzanne Mathews</td>
        <td>France</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Robert Schidner</td>
        <td>Russia</td>
    </tr>
    <tr>
        <td>1</td>
        <td>John Hammond</td>
        <td>United States</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Mudassar Khan</td>
        <td>India</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Suzanne Mathews</td>
        <td>France</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Robert Schidner</td>
        <td>Russia</td>
    </tr>
            

</table>
<br />
<input type="button" id="btnExport" value="Export" onclick="Export()" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script type="text/javascript">
    function Export() {
        html2canvas(document.getElementById('tblCustomers'), {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 500
                    }]
                };
                pdfMake.createPdf(docDefinition).download("Table.pdf");
            }
        });
    }
</script>

Customer Id	Name	Country
1	John Hammond	United States
2	Mudassar Khan	India
3	Suzanne Mathews	France
4	Robert Schidner	Russia
1	John Hammond	United States
2	Mudassar Khan	India
3	Suzanne Mathews	France
4	Robert Schidner	Russia

[SpinBoxx]

Any solutions ? The bug is still here