I cannot create table
Akshaypmna18 opened this issue · comments
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 Same issue
+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.
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.