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

【问题标题】：How to draw rounded rectangle in perticular cell using jsPDF and jSPDF autoTable?如何使用 jsPDF 和 jSPDF autoTable 在特定单元格中绘制圆角矩形？
【发布时间】：2020-02-11 17:55:43
【问题描述】：

我正在使用 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');

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

【问题讨论】：

标签： jspdf jspdf-autotable

【解决方案1】：

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

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

【讨论】：