首页 > 解决方案 > 在jspdf中为pdf创建矩阵类型卡片,与sap ui5集成

问题描述

希望你做得很好。

我的要求是创建矩阵类型卡片,使用 jspdf,与 sap ui5 集成。

到目前为止,我已经将 jspdf 与 SAP ui5 集成并使用卡片生成 pdf。

但是卡片的布局,需要根据随附的屏幕截图进行自定义。

在此处输入图像描述

我使用了来自 jsfiddle 的链接来创建 jspdf 中的卡片,该卡片发布在其中一条评论中。

////代码开始

var doc = new jsPDF('p', 'pt', 'a4');
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);

 function createCard(item) {

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

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

 if (requiredWidth <= pageWidth) {

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

startX = requiredWidth;


 } 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);
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]);
}

////代码结束

PFA,卡片截图,正在生成。

在此处输入图像描述

任何人都可以帮助我吗?

标签: javascriptsapui5jspdf

解决方案


推荐阅读