voilab / voilab-pdf-table Goto Github PK
View Code? Open in Web Editor NEWPdfKit wrapper that helps to draw informations in simple tables
License: MIT License
PdfKit wrapper that helps to draw informations in simple tables
License: MIT License
Hi,
I am trying to create two tables by creating one PDF. But I think something is going wrong as my code runs forever and never return anything. The PDF used to generate when I try to create only one table.
Do this library support creating multiple tables in one PDF? or is there any method to create two tables.
Thanks!
.onHeaderAdd(tb => {
// set header color
console.log('tb');
console.log(tb);
tb.pdf.fillColor('#000000')
tb.pdf.font('font/static/Inter-Medium.ttf')
})
unable to add header background color.
I noticed that if I add text to the pdf after a table. The text is put like it was in the last column.
To avoid this, you should add something like:
self.pdf.x = self.pdf.page.margins.left
right before this line:
https://github.com/voilab/voilab-pdf-table/blob/master/voilab-table.js#L724
I saw your answer. I already know.
And don't you usually reply to reply?
I mean,
Can renderer use two links per cell in a voilab-pdf-table?
I'm always grateful.
Let me know if there's any other way.
` let betaDivTable = new PdfTable(doc, {
// bottomMargin: 30
});
betaDivTable
// add some plugins (here, a 'fit-to-width' for a column)
.addPlugin(new (require('voilab-pdf-table/plugins/fitcolumn'))({
column: 'count'
}))
.onHeaderAdd(tb => {
// set header color
doc
.font(fonts.Noto.bold1)
.fillColor('#666668')
})
.onHeaderAdded(tb => {
// reset to standard color
doc.font(fonts.Noto.light)
})
// set defaults to your columns
.setColumnsDefaults({
headerBorder: ['T','B'],
border: ['B'],
headerBorderOpacity : 1,
borderOpacity : 0.5,
padding: [5, 5, 5, 5],
})
// add table columns
.addColumns([
{
id: 'beta',
header: 'Beta Diversity matrices (dm pc) ',
align: 'center',
cache: false,
width: 190,
// renderer: function (tb, data, draw, column, pos) {
// if (draw) {
// tb.pdf.fillColor('#666668')
// return data.beta;
// } else {
// return '';
// }
// }
},
{
id: '2d',
header: '2D plot',
align: 'center',
width: 60,
},
{
id: '3d',
header: '3D plot (Emperor)',
align: 'center',
width: 100,
},
{
id: 'tree',
header: 'UPGMA Tree',
align: 'center',
width: 70,
link: '#',
caches: false,
renderer: function (tb, data, draw, column, pos) {
if (draw) {
tb.pdf.fillColor('#2959a8')
//dynamic link
column.link = data.treeLink;
console.log(data.treeLink)
return data.tree;
} else {
return data.tree;
}
}
},
])
let betaDivList = [
{
"beta": 'Bray-Curtis ( dm pc )',
"2d": 'Link',
"3d": 'Link',
"tree": 'Link',
"treeLink": mrd.bray_tre,
},
{
"beta": 'Unweighted Unifrac Analysis ( dm pc )',
"2d": 'Link',
"3d": 'Link',
"tree": 'Link',
"treeLink": mrd.unw_tre,
},
{
"beta": 'Weighted Unifrac Analysis ( dm pc )',
"2d": 'Link',
"3d": 'Link',
"tree": 'Link',
"treeLink": mrd.wei_tre,
},
];
betaDivTable.addBody(betaDivList); `
is this possible? i've tried it by adding the fitcolumn plugin for each column but it ends up laying out really bad. i think this is a super common use case - i just want to render data in a table, i don't care how wide anything is because the width will vary depending on what i render. if i have one column that has super long values and one with some small values it would handle that nicely.
code": 500,
"message": "unsupported number: NaN",
"stack": "Error: unsupported number: NaN\n at PDFObject.number (
Hello,
I am looking for a way to adjust the alignment of my table so that I can have 2 tables side by side.
I am using PDFKit, I already have my table sized appropriately, I just need to know how to add a second table next to it.
Thanks
Ok i have about 8 columns, all of them have renderers that set color and return some data etc. this works fine but whenever i change my first column
form
{ id: 'name', header: 'Sector', align: 'left', width: 75 }
to
{ id: 'name', header: 'Sector', align: 'left', width: 75 , cache: false, renderer: function (tb, data, draw) {
if (draw) { tb.pdf.fillColor('black'); return data.name }
return ``
}}
All the lines of data end up on 1 line overlapping, if i swap back it renders correctly, i worked around the issue by adding a blank column at the end of each row that has 0 width and just sets tb.pdf.fillColor('black') return '', that way the color is correct for the next line ... but this seems hacky and the fact when i do the above it breaks the layout seems bad
The module works super well, I need to add border to each cell. How can I do this??
This only work for the header.??
.setColumnsDefaults({
headerBorder: ['L','T','B','R'],
align: 'center'
})
`FWDreadsTable
// add some plugins (here, a 'fit-to-width' for a column)
.addPlugin(new (require('voilab-pdf-table/plugins/fitcolumn'))({
column: 'count'
}))
// set defaults to your columns
.setColumnsDefaults({
headerBorder: ['T','B'],
border: ['B'],
padding: [5, 5, 5, 5],
})
// add table columns
.addColumns([
{
id: 'count',
header: '\nCount',
align: 'left',
width:70
},
{
id: 'sampleName',
header: '\nSample Name',
align: 'center',
width: 90
},
{
id: 'sequences',
header: '\nSeauences',
align: 'center',
width: 70
},
{
id: 'readLength',
header: 'Read\nLength',
align: 'center',
width: 70
},
{
id: 'GC',
header: 'GC\nContent',
align: 'center',
width: 70
},
{
id: 'fastQCPlots',
header: 'FastQC\nPlots',
cache: false,
width: 70,
link: 'xxxxx',
renderer(tb, data, draw) {
if (draw) {
tb.pdf.fillColor('#2959a8')
return data.fastQCPlots;
}
}
},
])
FWDreadsTable.addBody([
{count: 1, sampleName: '02232129_R1', sequences: 128978, readLength: '22-251', GC: 53, fastQCPlots: 'FASTQC'},
{count: 2, sampleName: '02232129_R2', sequences: 128978, readLength:'22-251', GC: 53, fastQCPlots: 'FASTQC'},
{count: 3, sampleName: '02232129_R3', sequences: 128978, readLength: '22-251', GC: 53, fastQCPlots: 'FASTQC'},
{count: 4, sampleName: '02232129_R4', sequences: 128978, readLength: '22-251', GC: 53, fastQCPlots: 'FASTQC'},
{count: 5, sampleName: '02232129_R5', sequences: 128978, readLength: '22-251', GC: 53, fastQCPlots: 'FASTQC'},
{count: 6, sampleName: '02232129_R6', sequences: 128978, readLength: '22-251', GC: 53, fastQCPlots: 'FASTQC'},
]);`
I just want the part I drew to be filled with color. (fill header )
How to add column spaces and table is creating right side of thee page. how to align it to left.
.setColumnsDefaults({
align: 'left',
})
I have implemented sample code but how can I make code for downloadable pdf file?
table.addBody([
{description: 'Product 1', quantity: 0, price: 20.10, total: 20.10},
{description: 'Product 2', quantity: 0, price: 4.00, total: 16.00},
{description: 'Product 3', quantity: 0, price: 17.85, total: 35.70}
]);
Is this a bug? Does it have a work-around?
is this possible given the current implementation? you can specify the cell fill but there doesn't seem to be an easy mechanism for filling on alternating rows
Is it possible to set a dynamic row height? Currently I set the row height by multiply the amount of sentences inside a row with a fixed height. The problem here is that row with little data generating a lot of white space respectively a lot of "empty" pages.
table
.addPlugin(new (require('voilab-pdf-table/plugins/fitcolumn'))({
column: 'created_date'
}))
.setColumnsDefaults({
headerBorder: 'B', align: 'right',padding:[5,0,5,0],hight:50
})
.addColumns(setColumns(doc))
// add events (here, we draw headers on each new page)
.onPageAdded(function (tb) {
tb.addHeader();
});
Hi, I'm using this module and have same questions, I don't know create more one page. How I do?
`let betaDivTable = new PdfTable(doc, {
// bottomMargin: 30
});
betaDivTable
// add some plugins (here, a 'fit-to-width' for a column)
.addPlugin(new (require('voilab-pdf-table/plugins/fitcolumn'))({
column: 'count'
}))
.onHeaderAdd(tb => {
// set header color
doc
.font(fonts.Noto.bold1)
})
.onHeaderAdded(tb => {
// reset to standard color
doc.font(fonts.Noto.light)
})
// set defaults to your columns
.setColumnsDefaults({
headerBorder: ['T','B'],
border: ['B'],
headerBorderOpacity : 1,
borderOpacity : 0.5,
padding: [5, 5, 5, 5],
})
// add table columns
.addColumns([
{
id: 'beta',
header: 'Beta Diversity matrices (dm pc) ',
align: 'left',
cache: false,
width:150,
renderer: function (tb, data, draw, column, pos) {
if (draw) {
tb.pdf.fillColor('#000000')
return data.beta;
} else {
return '';
}
}
},
{
id: '2d',
header: '2D plot',
align: 'center',
width: 70,
},
{
id: '3d',
header: '3D plot (Emperor)',
align: 'center',
width: 70,
},
{
id: 'tree',
header: 'UPGMA Tree',
align: 'center',
width: 70,
},
// {
// id: 'fastQcPlots',
// header: 'FastQC\nPlots',
// align: 'center',
// width: 70,
// cache: false,
// link: '#',
// renderer: function (tb, data, draw, column, pos) {
// if (draw) {
// tb.pdf.fillColor('#2959a8')
// //dynamic link
// column.link = data.link;
// return data.fastQcPlots;
// } else {
// return '';
// }
// }
// },
])
let betaDivList = [
{
"beta": 'Bray-Curtis ( dm pc )',
"2d": 'Link',
"3d": 'Link',
"tree": 'Link',
},
{
"beta": 'Unweighted Unifrac Analysis ( dm pc )',
"2d": 'Link',
"3d": 'Link',
"tree": 'Link',
},
{
"beta": 'Unweighted Unifrac Analysis ( dm pc )',
"2d": 'Link',
"3d": 'Link',
"tree": 'Link',
},
];
betaDivTable.addBody(betaDivList); `
I want to this
two different links in one line.
please ㅠㅡㅠ
this is my code
table
//add plugin for fix column
.addPlugin(new (require('voilab-pdf-table/plugins/fitcolumn'))({
column: 'created_date'
}))
.setColumnsDefaults({
// 'B' => 'buttom' , 'T' => 'top' , R => 'right' , 'L' => 'left'
headerBorder:['B'],align:'right', padding: [5, 0, 5, 0],valign: 'right', lineGap: 3.1,
})
.addColumns(setColumns(doc))
// add events (here, we draw headers on each new page)
.onPageAdded(function (tb) {
tb.addHeader();
});
....
table.addBody(rowValues);
sorry double #21
In my project I need to add some data in the tables with different styling, reviewing your code I found out that it should be possible by changing this part of the code:
this.text(data, pos.x + padding.left, y, lodash.assign({
height: row._renderedContent.height,
width: width
}, column));
that's right here:
https://github.com/voilab/voilab-pdf-table/blob/master/voilab-table.js#L95
This way, this will just add text... but... what do you think about replacing that with:
if (lodash.isFunction(data)) {
data(self.pdf, pos.x + padding.left, y, lodash.assign({
height: row._renderedContent.height,
width: width
}, column);
} else {
self.pdf.text(data, pos.x + padding.left, y, lodash.assign({
height: row._renderedContent.height,
width: width
}, column));
}
This way I can put a function with my own styling, or even put images or anything inside the cell like this:
table.addBody([
{title: 'Inception', description: function (pdf, x, y, options, column) {
pdf.font('Helvetica-Bold').text('A movie about dreams', x, y, options, column).font('Helvetica')
}},
{title: 'Batman', description: '....'},
])
in theory that should work.... what do you think?
Hello! I tried to find any information and got zero results.
I need to create multiple tables wit different headers, but stuck.
When I'm trying to add second table it's broken.
Second issue is: how to add only at last row TOP border? and last question: is there way to make bold text in last cell?
part of my code:
const pdf = new PDFDocument({
size: "A4",
margin: 45,
autoFirstPage: true,
}),
table = new PdfTable(pdf, {
bottomMargin: 30,
});
table
.addPlugin(
new (require("voilab-pdf-table/plugins/fitcolumn"))({
column: "title",
})
)
.setColumnsDefaults(column_opts);
add_table_func(pdf, table); //this makes new table for first time
pdf.x = left_margin;
pdf.moveDown(5);
add_table_func(pdf, table); //this makes broken table for second time
pdf.end();
function add_table_func(pdf, table) {
console.log("pdf.page.width", pdf.page.width);
table
.addColumns([
{
id: "title",
header: "Herr Peckewitz, Holger",
align: "left",
width: pdf.page.width - 330,
},
{
id: "net",
header: "Netto",
width: 50,
},
{
id: "tax",
header: "MwSt. 5%",
width: 60,
},
{
id: "gross",
header: "MwSt. 16%",
width: 60,
// border: ["L", "B", "T", "R"],
},
{
id: "total",
header: "Brutto",
width: 70,
// border: data.title == undefined ? ["B"] : [],
renderer: function (tb, data) {
table.pdf.fontSize(10).font("./IBM_Plex_Sans/IBMPlexSans-Light.ttf");
return data.total;
},
},
])
.onPageAdded(function (tb) {
tb.addHeader();
});
table.addBody([
{
title: "ISANA Cremedusche Pearl, 300 ml ",
net: 0.59,
tax: "0",
gross: 0.1,
total: 0.69,
},
{
title: "Liefergebühr",
net: 0.73,
tax: "0",
gross: 0.12,
total: 0.85,
},
{
net: 1.32,
tax: "0",
gross: 0.22,
total: 1.54,
last_field: true,
},
]);
}
Trying to figure out whats going on but if i do the following i get a huge out of memory crash every time.
doc.pipe(require('fs').createWriteStream('output.pdf'))
doc.image('logo.PNG', (doc.page.width / 2) - 88, (doc.page.height / 3) - 100)
doc.font('DaxOT.ttf')
doc.fontSize('32').text("Report", 0, 0.4 * (doc.page.height - doc.heightOfString("Report", { width: doc.page.width, align: 'center' })), { width: doc.page.width, align: 'center' })
doc.fontSize('12').text(`${require('moment')(new Date(startTime)).format("MM/DD/YYYY")} - ${require('moment')(new Date(endTime)).format("MM/DD/YYYY")}`, { width: doc.page.width, align: 'center' })
let table = new PdfTable(doc, { bottomMargin: 20 })
table.addColumns(columns)
doc.addPage()
doc.fontSize('16').fillColor('black').text("Top 10 Downlink Congestion")
doc.fontSize('10')
table.addBody(overallStats.sort((s) => s.congestDL).reverse().splice(0,10))
doc.fontSize('16').fillColor('black').text("Top 10 Downlink Congestion")
as soon as that last line hits, memory shoots to nearly 4g and the app crashes, here's the odd thing... if I throw a "doc.addPage()" above the text line at the end it doesn't crash.
Hi,
I have implemented the voilab-pdf-table table in my project
I need to pass dynamic rows in to table.addBody(response);
I have declared let response;
than i have response = JSON.stringify(result);
got the response JSON value
[{"name":"LAN CABLE","brandName":"HP","modelNo":"8989","serialNo":"","purchaseDate":"01-29-2020","status":"Replacement Request","companyName":"Test"},{"name":"USB KeyBoard","brandName":"HP","modelNo":"B1","serialNo":"B1","purchaseDate":"01-10-2020","status":"Assigned","companyName":"Test"},{"name":"Laptop","brandName":"DELL","modelNo":"","serialNo":"","purchaseDate":"09-23-2020","status":"Assigned","companyName":"Amazon"},{"name":"Laptop","brandName":"HP","modelNo":"","serialNo":"","purchaseDate":"10-06-2020","status":"Pending","companyName":"Flipkart"},{"name":"Laptop","brandName":"COMPAQ","modelNo":"ASSCewgvdb","serialNo":"","purchaseDate":"10-05-2020","status":"New","companyName":"World Link"},{"name":"Wireless mouse","brandName":"HP","modelNo":"","serialNo":"","purchaseDate":"10-12-2020","status":"New","companyName":"Earth Syscom"}]
Now please anyone suggest why i am facing the below Error
TypeError: Cannot create property '_renderedContent' on string '[' at setRowHeight (***\node_modules\voilab-pdf-table\voilab-table.js:182:30)
is there a way to stripe the rows? so every second line should be light grey or something like that?
thx
Hi,
Is there a way to display images inside the body of the table
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.