JSPDF：从数组对象生成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/

JSPDF：从数组对象生成pdf并像标签一样显示

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

jspdf

jspdf-autotable