CODEWITHSUNDEEP
javascriptjquerypdfsvgjspdf
Hector Latorre
Hector Latorre

Reputation: 51

jsPDF Big table, headers overlap in second page

I'm using jsPDF and svg_to_pdf to export both an SVG and a table to a PDF. This is my code:

function svg_to_pdf(svg, callback) {

console.log("svgtopdf.js");
svgAsDataUri(svg, {}, function(svg_uri) {
var image = document.createElement('img');

image.src = svg_uri;
image.onload = function() {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  var doc = new jsPDF('portrait', 'pt', 'a4', true);
  var dataUrl;

  source = $('#datos_alumnos')[0];
  specialElementHandlers = {
      '#bypassme' : function(element, renderer){
          return true;
      }
  };

  margins = {
            top: 40,
            bottom: 60,
            left: 40,
            width: 270
        };


  canvas.width = image.width;
  canvas.height = image.height;
  context.drawImage(image, 0, 0, image.width, image.height);
  dataUrl = canvas.toDataURL('image/jpeg');
  doc.addImage(dataUrl, 'JPEG', 0, 0, 500, 263);


  doc.fromHTML(
    source,
    40,
    270, {
        'width': 550,
        'elementHandlers': specialElementHandlers
    },

    function(dispose){
        //doc.save('SVG.pdf');
    }
    , margins);

callback(doc);
}
});
}

The result is a PDF with the image at the top and the table next. The problem comes when it enters the second page as the headers of the table overlap with the first row and it looks like this.

https://i.sstatic.net/MfRX3.png

Is it possible to remove the headers on the second page?

Upvotes: 3

Views: 4901

Answers (4)

Gomathi Gothandan
Gomathi Gothandan

Reputation: 1

I did a work around, instead of adding header to all the pages, add header separately to the first page. From the second page add it as footer.

Upvotes: 0

Tejas
Tejas

Reputation: 1

Try adding css classes like - thead { display: table-header-group } tfoot { display: table-row-group } tr { page-break-inside: avoid }

Upvotes: 0

rrusev
rrusev

Reputation: 103

When you draw table, just use: 

startY: doc.internal.getNumberOfPages() > 1 ? doc.autoTableEndPosY() + 20 : 200,

Upvotes: 0

Hector Latorre
Hector Latorre

Reputation: 51

Ok so I've found a possible solution for this, if you are using this script for jsPDF

https://raw.githubusercontent.com/MrRio/jsPDF/master/dist/jspdf.debug.js

you can download it, and modify line 5201 to have a negative value, for example;

    this.margins.top = -50;

With this there is no header on the second page of the PDF.

I've tried playing around with the code without much success, if I find a better way I will update this answer (don't know if I'm allowed to do that).

Upvotes: 2

Related Questions