Search code examples
jspdfjspdf-autotable

JSPDF : Genearte pdf from object of array and display like Lables

I want to generate PDF from object of array and display like this which I have attached in image.PDF data in Lable view .how I can achieve this while my output is in row wise. 

  htmlStr += '<table id="customers" class="table-wide">';
htmlStr += '<thead ></thead>';
htmlStr += '<tbody ></tbodyid>';
htmlStr += '</table>';
this.html = $(htmlStr);
Solution

  • I think you have to do it on your own. jsPDF-Autotable is not good option for this scenario. Following is something like a scratch it's not a perfect solution. Please work on it further.

    Actually we are going to create grid cards until the page width and height.

    If height reaches, add new page doc.addPage().

    If width reaches, add new row.

        var data = [{
      "Name": "Ronan",
      "Email": "sodales.elit@eratSed.co.uk",
      "Company": "Malesuada Malesuada Ltd"
    }, {
      "Name": "Calvin",
      "Email": "amet.nulla@Vestibulumante.ca",
      "Company": "Donec Egestas Foundation"
    }, {
      "Name": "Kane",
      "Email": "Duis.mi@consectetueradipiscingelit.net",
      "Company": "Arcu Institute"
    }, {
      "Name": "Kasper",
      "Email": "magna.Phasellus.dolor@velconvallisin.co.uk",
      "Company": "Tempor LLP"
    }];
    
    
  

     var doc = new jsPDF('p', 'pt', 'a4');
//Dimension of A4 in pts: 595 × 842

var pageWidth = 595;
var pageHeight = 842;

var pageMargin = 20;

pageWidth -= pageMargin * 2;
pageHeight -= pageMargin * 2;

var cellPadding = 10;
var cellWidth = 180;
var cellHeight = 70;
var lineHeight = 20;

var startX = pageMargin;
var startY = pageMargin;


doc.setFontSize(12);

var page = 1;

function createCard(item) {

  //cell projection
  var requiredWidth = startX + cellWidth + (cellPadding * 2);

  var requiredHeight = startY + cellHeight + (cellPadding * 2);



  if (requiredWidth <= pageWidth) {

    textWriter(item, startX + cellPadding, startY + cellPadding);

    startX = requiredWidth;
    //  startY += cellHeight + cellPadding;

  } else {


    if (requiredHeight > pageHeight) {
      doc.addPage();
      page++;
      doc.setPage(page);

      startY = pageMargin;
    } else {
      startY = requiredHeight;
    }

    startX = pageMargin;


    textWriter(item, startX + cellPadding, startY + cellPadding);

    startX = startX + cellWidth + (cellPadding * 2);
  }

}

function textWriter(item, xAxis, yAxis) {
  doc.text(item.Name, xAxis, yAxis);
  doc.text(item.Email, xAxis, yAxis + lineHeight);
  doc.text(item.Company, xAxis, yAxis + (lineHeight * 2));
}


for (var i = 0; i < data.length; i++) {
  createCard(data[i]);
}

doc.save('grid.pdf');

    For reference https://jsfiddle.net/Purushoth/jodfkz59/