如何使用 jsPDF 和 jSPDF autoTable 在特定单元格中绘制圆角矩形？

Question

我正在使用jsPDF和jsPDF-autoTable来打印HTML表格数据到PDF文件中。然而，我们有一个自定义需求，我无法继续下去。我尝试了一些选项，但似乎对我来说并不奏效。

我想要的是，我想在一个特定的单元格中打印一个圆形的矩形。就像这样。

我试了几个选项。这是我的代码。

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');

任何即时的帮助将被感激。

Answer 1

在写这篇评论的时候，我使用的是以下版本的库。

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

我建议使用上述版本的jsPDF，并简单地使用函数RoundedRect()

更多信息请看这里。https:/artskydj.github.iojsPDFdocsjsPDF.html#roundedRect。

例子:这将绘制一个笔画圆角矩形。

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