pdfme
pdfme copied to clipboard
pdfme
I cannot create table
Describe the bug
I cannot create table using pdfme
To Reproduce
const [template, setTemplate] = useState({
// basePdf: BLANK_PDF,
basePdf: { width: 210, height: 297, padding: [10, 10, 10, 10] },
schemas: [
{
mytable: {
type: "table",
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-table"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>',
position: { x: 28.706846058368317, y: 37.85750960310253 },
width: 150,
height: 57.5184,
content:
'[["Alice","New York","Alice is a freelance web designer and developer"],["Bob","Paris","Bob is a freelance illustrator and graphic designer"]]',
showHead: true,
head: ["Name", "City", "Description"],
headWidthPercentages: [30, 30, 40],
tableStyles: { borderWidth: 0.3, borderColor: "#000000" },
headStyles: {
fontName: "NotoSerifJP-Regular",
fontSize: 13,
characterSpacing: 0,
alignment: "left",
verticalAlignment: "middle",
lineHeight: 1,
fontColor: "#ffffff",
borderColor: "",
backgroundColor: "#2980ba",
borderWidth: { top: 0, right: 0, bottom: 0, left: 0 },
padding: { top: 5, right: 5, bottom: 5, left: 5 },
},
bodyStyles: {
fontName: "NotoSerifJP-Regular",
fontSize: 13,
characterSpacing: 0,
alignment: "left",
verticalAlignment: "middle",
lineHeight: 1,
fontColor: "#000000",
borderColor: "#888888",
backgroundColor: "",
alternateBackgroundColor: "#f5f5f5",
borderWidth: { top: 0.1, right: 0.1, bottom: 0.1, left: 0.1 },
padding: { top: 5, right: 5, bottom: 5, left: 5 },
},
columnStyles: {},
},
},
],
});
let designer;
const inputs = [
{
mytable: [
[
"Alice",
"New York",
"Alice is a freelance web designer and developer",
],
["Bob", "Paris", "Bob is a freelance illustrator and graphic designer"],
],
},
];
const handlePdf = async () =>
await generate({
template,
inputs,
plugins: {
text,
image,
qrcode: barcodes.qrcode,
Table: tableBeta,
line,
rectangle,
ellipse,
svg,
readOnlySvg,
readOnlyImage,
readOnlyText,
},
}).then((pdf) => {
const blob = new Blob([pdf.buffer], { type: "application/pdf" });
window.open(URL.createObjectURL(blob));
});
```
### Expected behavior
the error message
VM4835:1 Uncaught (in promise) SyntaxError: Unexpected token 'A', "Alice,New "... is not valid JSON
at JSON.parse (<anonymous>)
at modifyTemplateForTable (chunk-HQ6VPE25.js?v=d5246820:104654:27)
at modifyTemplate (@pdfme_generator.js?v=1305fb5a:123:16)
at getDynamicTemplate (chunk-RT2GMJPP.js?v=d5246820:6098:34)
at generate (@pdfme_generator.js?v=1305fb5a:117:35)
at async handlePdf (pdfme.jsx:96:5)
### Your Environment
```markdown
- pdfme package(@pdfme/generator or @pdfme/ui):@pdfme/generator
- pdfme version: i don't know
- Operating system: windows 10
- Node.js version or Browser name & version: 18. and brave
Your Error Log
VM4835:1 Uncaught (in promise) SyntaxError: Unexpected token 'A', "Alice,New "... is not valid JSON
at JSON.parse (<anonymous>)
at modifyTemplateForTable (chunk-HQ6VPE25.js?v=d5246820:104654:27)
at modifyTemplate (@pdfme_generator.js?v=1305fb5a:123:16)
at getDynamicTemplate (chunk-RT2GMJPP.js?v=d5246820:6098:34)
at generate (@pdfme_generator.js?v=1305fb5a:117:35)
at async handlePdf (pdfme.jsx:96:5)
Additional context
const [template, setTemplate] = useState({
// basePdf: BLANK_PDF,
basePdf: { width: 210, height: 297, padding: [10, 10, 10, 10] },
schemas: [
{
mytable: {
type: "table",
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-table"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>',
position: { x: 28.706846058368317, y: 37.85750960310253 },
width: 150,
height: 57.5184,
content:
'[["Alice","New York","Alice is a freelance web designer and developer"],["Bob","Paris","Bob is a freelance illustrator and graphic designer"]]',
showHead: true,
head: ["Name", "City", "Description"],
headWidthPercentages: [30, 30, 40],
tableStyles: { borderWidth: 0.3, borderColor: "#000000" },
headStyles: {
fontName: "NotoSerifJP-Regular",
fontSize: 13,
characterSpacing: 0,
alignment: "left",
verticalAlignment: "middle",
lineHeight: 1,
fontColor: "#ffffff",
borderColor: "",
backgroundColor: "#2980ba",
borderWidth: { top: 0, right: 0, bottom: 0, left: 0 },
padding: { top: 5, right: 5, bottom: 5, left: 5 },
},
bodyStyles: {
fontName: "NotoSerifJP-Regular",
fontSize: 13,
characterSpacing: 0,
alignment: "left",
verticalAlignment: "middle",
lineHeight: 1,
fontColor: "#000000",
borderColor: "#888888",
backgroundColor: "",
alternateBackgroundColor: "#f5f5f5",
borderWidth: { top: 0.1, right: 0.1, bottom: 0.1, left: 0.1 },
padding: { top: 5, right: 5, bottom: 5, left: 5 },
},
columnStyles: {},
},
},
],
});
const inputs = [
{
mytable: [
[
"Alice",
"New York",
"Alice is a freelance web designer and developer",
],
["Bob", "Paris", "Bob is a freelance illustrator and graphic designer"],
],
},
];
const handlePdf = async () =>
await generate({
template,
inputs,
plugins: {
text,
image,
qrcode: barcodes.qrcode,
Table: tableBeta,
line,
rectangle,
ellipse,
svg,
readOnlySvg,
readOnlyImage,
readOnlyText,
},
}).then((pdf) => {
const blob = new Blob([pdf.buffer], { type: "application/pdf" });
window.open(URL.createObjectURL(blob));
});
<Button onClick={handlePdf}>Create pdf</Button>
+1 have same issue, tired example from website, didn't help. However, I figured out a way to make it work here's how:
const inputs = {
//some inputs
"mytable": "[[\"Alice\",\"New York\",\"Alice is a freelance web designer and developer\"],[\"Bob\",\"Paris\",\"Bob is a freelance illustrator and graphic designer\"]]"
}
This creates a dynamically filled table for me, if you follow the docs example and make this change, you will get dynamic tables to work.
@romankolosok Unfortunately it didn't work for me. I could get rid of the previous error but now I'm receiving "Blank PDF is not supported" which is thrown by the createSingleTable method.
@ctkc if you're using betaTable you need margins
try
"basePdf": { "width": 210, "height": 297, "padding": [10,10,10,10] }
@lowbits Thanks for the suggestion, that works! The problem was that I had a base64 encoded string in the basePdf because I was using a base PDF as a template. I generated it here https://playground.pdfme.com/ so it seems like the playground is not supporting tables yet.
I apologize for the inconvenience. I'd like to note two points for future reference:
- Tables don't work when loading an existing PDF (custom PDF) as a base64 basePdf. This is because page breaks can't be implemented for existing PDF (custom PDF). PDF files can sometimes be more than one page. Please set page size like bellow:
"basePdf": { "width": 210, "height": 297, "padding": [10,10,10,10] }
- I've found that inputs like the following throw an error, despite being in line with the documentation:
const inputs = [{
mytable: [["Alice", "New York", "Alice is a freelance web designer and developer"], ["Bob", "Paris", "Bob is a freelance illustrator and graphic designer"]],
}];
Currently, it works if the 2D array is converted to a string, like this:
const inputs = [{
"mytable": "[[\"Alice\",\"New York\",\"Alice is a freelance web designer and developer\"],[\"Bob\",\"Paris\",\"Bob is a freelance illustrator and graphic designer\"]]"
}]
I plan to address this by modifying the PDF generation process for the table schema.
Ref:
- https://github.com/pdfme/pdfme/issues/473
- https://github.com/pdfme/pdfme/issues/479
- https://github.com/pdfme/pdfme/issues/482
- https://github.com/pdfme/pdfme/issues/486
- Tables don't work when loading an existing PDF (custom PDF) as a base64 basePdf.
For this problem, we address it here: https://github.com/pdfme/pdfme/issues/486
- I've found that inputs like the following throw an error
For this problem, we address it here: https://github.com/pdfme/pdfme/issues/496
Does this mean that template will only accept arrays, or it still can accept stringified arrays? My service is currently using many templates with stringified arrays.
Hi @romankolosok At this point, we plan to accept both arrays and stringified arrays.