如何在 jsPdf 中为 React js 的 autoTable 指定坐标或提供边距?
How to specify coordinates or provide margins for the autoTable in jsPdf for React js?
我正在使用 jsPdf 库在 React 中生成 pdf。但是如果单个页面中有多个 table,我将无法为 autoTable 提供边距!
代码如下:-
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", "david@example.com", "Sweden"],
["David", "david@example.com", "Sweden"],
["David", "david@example.com", "Sweden"],
["David", "david@example.com", "Sweden"],
["David", "david@example.com", "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;
边距对第一个 table 起作用,但对第二个 table 提供或更改顶部边距没有反映任何变化!
我可以提供 jsPdf auto 的 x 和 y 坐标table吗?
找到答案了!我们可以使用 startY 为 table.
提供 y 坐标
我正在使用 jsPdf 库在 React 中生成 pdf。但是如果单个页面中有多个 table,我将无法为 autoTable 提供边距!
代码如下:-
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", "david@example.com", "Sweden"],
["David", "david@example.com", "Sweden"],
["David", "david@example.com", "Sweden"],
["David", "david@example.com", "Sweden"],
["David", "david@example.com", "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;
边距对第一个 table 起作用,但对第二个 table 提供或更改顶部边距没有反映任何变化!
我可以提供 jsPdf auto 的 x 和 y 坐标table吗?
找到答案了!我们可以使用 startY 为 table.
提供 y 坐标