Give space to element if it does not fit within A4 size

Question

I aim to export a long div that has images to PDF format. I am using the Html2Canvas and JSPDF library. I have managed to take a snapshot and export it to JS in different pages as well. However, the issue I face is that the images of the original get clipped as Canvas element exports it as one big image. The solution I believe will help is providing padding/space if the next element does not fit within A4 size.

Following is my code

 function Export2PDF(element){



                     var div = document.getElementById("ExportDiv");
                     var rect = div.getBoundingClientRect();


                     var canvas = document.createElement("canvas");
                     canvas.width = rect.width;
                     canvas.height = rect.height;

                     var ctx = canvas.getContext("2d");
                     ctx.translate(-rect.left,-rect.top);

                     document.body.appendChild(canvas)
                     html2canvas(div, {
                                 canvas:canvas,
                                 height:rect.height,
                                 width:rect.width,
                                 onrendered: function(canvas) {
                                 var image = canvas.toDataURL("image/png");

                                 var imgWidth = 210;
                                 var pageHeight = 295;
                                 var imgHeight = canvas.height * imgWidth / canvas.width;
                                 var heightLeft = imgHeight;
                                 var doc = new jsPDF('p', 'mm');
                                 var position = 0;

                                 doc.addImage(image, 'PNG', 20, position, imgWidth, imgHeight);
                                 heightLeft -= pageHeight;

                                 while (heightLeft >= 0) {
                                 position = heightLeft - imgHeight;
                                 doc.addPage();
                                 doc.addImage(image, 'PNG', 20, position, imgWidth, imgHeight);
                                 heightLeft -= pageHeight;
                                 }
                                 doc.save( 'file.pdf');






                                 }
                                 });
                     }

Can anyone please help me in achieving the same Please? Thank You in advance.

EDIT

The div structure is following:-

<div>
<table >Table 1
<tr>
<tr>
<tr>
</table>

<table >Table 2</table>
<table >Table 3</table>
</div>

Each TR comes out as

score 1 · Accepted Answer · answered Aug 02 '18 at 12:52

1

when I faced similar issue I kept track of where the height 'pointer' is and when currentHeight + imageHeight > somevalue then I simply added new page, sample code:

var height = 0;
var image = loadImage();
...
...
doc.text(0, height, 'asd');
height += 30;
if (height + image.height > 230) //you need to experiment with value, I found that 230 was fine for me
{
    doc.addPage();
    height = 0;
}
doc.image(0, height, image);

answered Aug 02 '18 at 12:52

bestestefan

852
6
20

Was there no problem in adding images this way? MY images are unpredictable and appear randomly. – The Doctor Aug 02 '18 at 12:54
1

everything works fine, you can specify image height and width in `image` method, you need to carefully check your code and look for height modification, you need to carefully keep track of height and then check if `currentHeight + imageHeight < pageSize`, if you do it correctly there's no way it won't work correctly – bestestefan Aug 02 '18 at 12:56
let me share the snapshot of the div structure. – The Doctor Aug 02 '18 at 12:59

Give space to element if it does not fit within A4 size

1 Answers1