JSPDF:Genearte pdf，来自数组对象和类似Lables的显示 [英] JSPDF : Genearte pdf from object of array and display like Lables

问题描述

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

I want to generate PDF from object of array and display like this which I have attached in image. .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);

推荐答案

我认为您必须自己做. jsPDF-Autotable在这种情况下不是很好的选择.跟随就像是从头开始，这不是一个完美的解决方案.请进一步处理.

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.

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

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

如果宽度达到，请添加新行.

If width reaches, add new row.

    var data = [{
      "Name": "Ronan",
      "Email": "[e-mail]",
      "Company": "Malesuada Malesuada Ltd"
    }, {
      "Name": "Calvin",
      "Email": "[e-mail]",
      "Company": "Donec Egestas Foundation"
    }, {
      "Name": "Kane",
      "Email": "[e-mail]",
      "Company": "Arcu Institute"
    }, {
      "Name": "Kasper",
      "Email": "[e-mail]",
      "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:Genearte pdf，来自数组对象和类似Lables的显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！