Pdfmake: Empty PDF generated for large image

[AswarthaA]

Attached image is generated by html2canvas and I am trying to save it as PDF. But pdf is gerating empty document with two pages.

Can any one help to solve this?

html2canvas(document.getElementById("myTable"), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data
}]
};
pdfMake.createPdf(docDefinition).download("Consolidated_Transcript.pdf");
}
});

[bhericher]

The generation of the image is asynchronous. You must wait its completion and generate the pdf after the onload event : use a timeout or, better, a promise.

[liborm85]

If image is larger than page will not be displayed.

[AswarthaA]

@liborm85 so alerternative is to generate individual table and generate PDF?

[seanfuture]

Thanks for comments here - By adding fit: [590, 100000] to the image definition the image then displayed where before the page was blank

[AswarthaA]

@seanfuture let me try out this approach also. For now we are generating individual images and generating pdf.

[wilsaj]

I'm also running into this.

It's only a problem if the image overflows the height of the page. I think the desired behavior would be for the image to just just show the part of the image that fits on the page instead of a blank image. This is what happens with images that are wider than fit on the page.

Copy / pasting this into the playground demonstrates the issue:

var dd = {
  content: [
    {
      text: 'The following page displays correctly with the image',
      pageBreak: 'after'
    },
    {
      image: 'sampleImage.jpg',
      height: 761,
    },
    {
      text: 'The following page does not display correctly - there are just two blank pages',
      pageBreak: 'after'
    },
    {
      image: 'sampleImage.jpg',
      height: 762,
    },
  ],
}

It only renders the first image, the second one is just two blank pages:

[wilsaj]

It looks like what is happening is:

1. When the page is being laid out and the image is larger than the available vertical space
2. Then a page break is added and placing the image is tried again
3. If it still fails because the image too big even for the new blank page, then the image doesn't get placed at all. Instead, it should always force the image placement if working with a blank page.

I can try to put together a PR with a fix for this in the next day or two.

[liborm85]

Fixed by PR https://github.com/bpampuch/pdfmake/pull/1031.

[moumitabala]

I'm having the same issue. The image I'm creating with dimension _1140x3190_ but I'm getting only one page pdf with cutting off.
In my project I'm using pdfmake.min.js directly but as I check here solution is done in a function ElementWriter.prototype.addImage() in /src/elementWriter.js ..

Here is my code ::

<script defer src="/js/library/html2canvas.js"></script>
<script defer src="/js/library/pdfmake.min.js"></script>
<script defer src="/js/library/vfs_fonts.js"></script>

html2canvas(document.getElementById('content_area'), { 
    onrendered: function (canvas) {
        var data = canvas.toDataURL(); 

        width = canvas.width;
        height = canvas.height;

        var docDefinition = {                          
            content: [{
                image: data,
                width: width,
                height: height 
            }]
        };                     
        pdfMake.createPdf(docDefinition).download("sample.pdf");
    }                    
});

So here how will I implement this solution? So The LARGE image will properly convert into pdf with multiple page.

[paulmdi]

i hope this helps: https://gist.github.com/Balkoth/d79a520ca2a3377c15e902ec68790aff