Question

我正在使用数据对象数据数据转换为PDF。但在这种情况下，列重叠。我必须在哪里应用linebreak以及如何？我附上了工作Jsfiddle。

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

＆＃13;

var doc = new jsPDF('p', 'pt', 'a4');
//Dimension of A4 in pts: 595 × 842

var pageWidth = 595;
var pageHeight = 842;

var pageMargin = 40;

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);

function createCard(item) {

  //cell projection
  var requiredWidth = startX + cellWidth + (cellPadding * 3);

  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();
      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);
  var splitTitle = doc.splitTextToSize(item.Email, 180);
doc.text(15, 20, splitTitle);
  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');

＆＃13;

Answer 1

为了获得更好的输出，请尝试 jsPDF-AutoTable 插件（当然是免费的），这将真正帮助您拥有可以根据数据长度进行调整的流畅行/列。

以下是有效的演示： https://jsfiddle.net/jodfkz59/12/

工作代码：

var columns = [{title: "Name", dataKey:"Name"}, {title:"Email", dataKey: "Email"}, {title:"Company", dataKey: "Company"}];

var rows = [{
  "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"
}, {
  "Name": "Kasper1",
  "Email": "magna.Phasellus.dolo1r@velconvallisin.co.uk",
  "Company": "Tempor LLP1"
}, {
  "Name": "Calvin",
  "Email": "amet.nulla@Vestibulumante.ca",
  "Company": "Donec Egestas Foundation"
}, {
  "Name": "Calvin",
  "Email": "amet.nulla@Vestibulumante.ca",
  "Company": "Donec Egestas Foundation"
}, {
  "Name": "Calvin",
  "Email": "amet.nulla@Vestibulumante.ca",
  "Company": "Donec Egestas Foundation"
}, {
  "Name": "Calvin",
  "Email": "amet.nulla@Vestibulumante.ca",
  "Company": "Donec Egestas Foundation"
}, {
  "Name": "Calvin",
  "Email": "amet.nulla@Vestibulumante.ca",
  "Company": "Donec Egestas Foundation"
}, {
  "Name": "Calvin",
  "Email": "amet.nulla@Vestibulumante.ca",
  "Company": "Donec Egestas Foundation"
}, {
  "Name": "Calvin",
  "Email": "amet.nulla@Vestibulumante.ca",
  "Company": "Donec Egestas Foundation"
}, {
  "Name": "Calvin",
  "Email": "amet.nulla@Vestibulumante.ca",
  "Company": "Donec Egestas Foundation"
}, {
  "Name": "Calvin",
  "Email": "amet.nulla@Vestibulumante.ca",
  "Company": "Donec Egestas Foundation"
}, {
  "Name": "Calvin",
  "Email": "amet.nulla@Vestibulumante.ca",
  "Company": "Donec Egestas Foundation"
}, {
  "Name": "Calvin",
  "Email": "amet.nulla@Vestibulumante.ca",
  "Company": "Donec Egestas Foundation"
}, {
  "Name": "Calvin",
  "Email": "amet.nulla@Vestibulumante.ca",
  "Company": "Donec Egestas Foundation"
}, {
  "Name": "Calvin",
  "Email": "amet.nulla@Vestibulumante.ca",
  "Company": "Donec Egestas Foundation"
}, {
  "Name": "Calvin",
  "Email": "amet.nulla@Vestibulumante.ca",
  "Company": "Donec Egestas Foundation"
}, {
  "Name": "E.N.D",
  "Email": "amet.nulla@Vestibulumante.ca",
  "Company": "Donec Egestas Foundation"
}];



var doc = new jsPDF('p', 'pt');
doc.autoTable(columns, rows, {
    margin: {top: 60},
    addPageContent: function(data) {
        doc.text("Header", 40, 30);
    }
});
doc.save('table.pdf');

希望这有帮助！

JSPDF数据重叠，不会转到下一页

1 个答案: