I am new to React and Javascript. I have been struggling to find a solution to my issue while trying to create a .pdf document for a customer invoice using "jsPdf" along with its plugin "jspdf-autoTable".
So far, everything is being generated correctly by assigning XY starting coordinates to each element (text, image, table) in the javascript code. My problem arises when I have two tables, Table A and Table B, positioned vertically next to each other. As Table A increases its rows, it eventually starts overlapping with Table B which has a fixed number of rows.
Is there a way to prevent the overlap between Table A and Table B, ensuring that all content below Table A dynamically moves downwards as Table A expands?
For example:
const generatePDF = () => {
const unit = "pt";
const size = "A4";
const orientation = "portrait";
const doc = new jsPDF(orientation, unit, size);
let contentA = {
head: [["Item", "Quantity", "Price", "Item Total"]],
body: [
['Water Bottle A', '1', '8.99', '8.99'],
['Water Bottle B', '1', '8.99', '8.99'],
['Water Bottle C', '1', '8.99', '8.99'],
['Water Bottle D', '1', '8.99', '8.99'],
],
foot: [['', '', 'Total:', '35.96']],
margin: 40,
tableLineWidth: 0.5,
tableLineColor: "black",
tableWidth: 'auto',
startY: 100,
theme: 'striped',
pageBreak: 'auto',
}
let contentB = {
head: [["Subtotal", "$35.96"]],
body: [
['Taxes', '$4.49'],
['Payment Method:', 'Cash'],
],
foot: [['Total:', '35.96']],
margin: 40,
tableLineWidth: 0.5,
tableLineColor: "black",
tableWidth: 'auto',
startY: 150,
theme: 'striped',
pageBreak: 'auto',
}
doc.autoTable(contentA)
doc.autoTable(contentB)
doc.text('Thank you for your purchase!', 150, 800);
doc.save("my-report-document.pdf")
}
Currently, all rows are static (in my app, I iterate through an array of objects to generate the rows). If I add 30 more rows to the body property of "contentA", the tables will overlap.
The "startY" property determines the starting 'Y' coordinate for each table. It is acceptable if the content below Table A extends to a second page, as long as the vertical overlap is eliminated.
Any assistance would be greatly appreciated.