CODEWITHSUNDEEP
jspdfjspdf-autotable
mpatel
mpatel

Reputation: 486

How to draw rounded rectangle in perticular cell using jsPDF and jSPDF autoTable?

I am using jsPDF along with jsPDF-autoTable to print my HTML table data into the PDF file. However, we have one custom requirement for which I am not able to proceed further. I tried a few options. but it seems to be not working for me.

What I want is, I want to print a rounded rectangle in a particular cell. Something like this. enter image description here

I tried a few options. Here's is my code.

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

Any immediate help would be appreciated.

Upvotes: 0

Views: 5688

Answers (1)

Shiraz
Shiraz

Reputation: 23

At the time of writing this comment, i am using the following version of the library:

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

I recommend using the above version of the jsPDF and simply use function RoundedRect()

See here for more infor: https://artskydj.github.io/jsPDF/docs/jsPDF.html#roundedRect

Example: This will draw a stroke rounded rectangle. 

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

Upvotes: 1

Related Questions