如何使用jsPDF和jSPDF autoTable在垂直单元格中绘制圆角矩形?

时间:2019-10-15 06:00:46

标签: jspdf jspdf-autotable

我正在使用jsPDF和jsPDF-autoTable将HTML表格数据打印到PDF文件中。但是,我们有一个自定义要求,因此我无法继续进行。我尝试了一些选择。但这似乎对我不起作用。

我想要的是,我想在特定单元格中打印一个圆角矩形。这样的事情。 enter image description here

我尝试了一些选择。这是我的代码。

const doc = new jsPDF('p', 'pt', 'a4');
doc.autoTable({
                        head: headerdata, // array of arrays
                        theme: 'grid',
                        body: bodydata, // arry of arrays
                        startY: doc.autoTable.previous.finalY,
                        Padding: { top: 20, right: 15, bottom: 20, left: 25, },
                        styles: {
                            lineColor: [220, 220, 220],
                            lineWidth: 0.5,
                            overflow: 'linebreak',
                        },
                        willDrawCell: (data) => {
                            if (data.section === 'body' && data.column.dataKey === 2) {
                                doc.setFillColor(239, 154, 154);
                                doc.roundedRect(data.cell.textPos.x + 3, data.cell.textPos.y + 3, data.cell.width, data.cell.height, 5, 5, 'FD');
                            }
                        },
                        headStyles: { fillColor: [249, 249, 251], textColor: [34, 34, 34], },
                        });
    doc.save('test.pdf');

任何即时帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

在撰写此评论时,我正在使用以下版本的库:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

我建议使用以上版本的jsPDF并仅使用功能RoundedRect()

有关更多信息,请参见此处:https://artskydj.github.io/jsPDF/docs/jsPDF.html#roundedRect

示例: 这将绘制一个描边圆角矩形。

doc.roundedRect(10, 60, 190, 220, 5, 5, 'S')