jspdf - JSPDF：来自数组对象的Genearte pdf并像标签一样显示

Question

我想从数组对象生成 PDF 并像我在图像中附加的这样显示。.如何在我的输出按行排列时实现这一点。

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

Answer 1

我认为你必须自己做。jsPDF-Autotable 不是这种情况的好选择。以下是类似划痕的东西，它不是一个完美的解决方案。请进一步努力。

实际上，我们将创建网格卡，直到页面宽度和高度。

如果高度达到，则添加新页面doc.addPage()。

如果宽度达到，则添加新行。

    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');

供参考https://jsfiddle.net/Purushoth/jodfkz59/