While working with the jsPdf library to create a PDF in React, I am encountering an issue where I am unable to set margins for the autoTable when there are multiple tables on a single page.
Below is the code snippet:
import React from "react";
var { jsPDF } = require("jspdf");
require("jspdf-autotable");
function ShowPdf() {
const [head] = React.useState(["Name", "Email", "Country"]);
const [body] = React.useState([
["David", "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f7b7e69767b5f7a677e726f737a317c7072">[email protected]</a>", "Sweden"],
[...]
]);
const generatePDF = () => {
let doc = new jsPDF("p", "pt", "a4");
doc.setFont("Calibri", "bold");
doc.setFontSize(14);
doc.setTextColor(14, 3, 64);
doc.text("Table 1", 20, 140);
doc.line(20, 142, 550, 142);
doc.text("Table 2", 20, 300);
doc.line(20, 302, 550, 302);
doc.autoTable({
margin: { top: 150, left: 20, bottom: 30 },
head: [head],
body: [body[0], body[1], body[2], body[3], body[4]],
});
doc.autoTable({
margin: { top: 400, left: 20, bottom: 30 },
head: [head],
body: [body[0], body[1], body[2], body[3], body[4]],
});
window.open(doc.output("bloburl"), "_blank");
};
return (
<div>
<button onClick={generatePDF} type="primary">
Generate PDF
</button>
</div>
);
}
export default ShowPdf;
The margin setting seems to work correctly for the first table, but it does not have any effect on the second table!
I'm wondering if it's possible to provide x and y coordinates for jsPdf autotable?