voilab / voilab-pdf-table Goto Github PK

View Code? Open in Web Editor NEW

52.0 52.0 26.0 129 KB

PdfKit wrapper that helps to draw informations in simple tables

License: MIT License

JavaScript 100.00%

voilab-pdf-table's People

Contributors

Stargazers

Watchers

voilab-pdf-table's Issues

Side by side Tables

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

Issue with text after a table when on same page

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.

Node Js NPM PDFkit and Voilab pdf table, pdfkit paragraph error afer generate table

sorry double #21

How to add header background color in table header ?

.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.

How to set style (font, header color fill, text color....)

`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'},
]);`

FastQCPlots with the link will have the text truncated.
I wish only the FastQCPlots column was blue.

I just want the part I drew to be filled with color. (fill header )

How to make downloadable the generated pdf file

I have implemented sample code but how can I make code for downloadable pdf file?

How to set two different links in one line.

`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 ㅠㅡㅠ

It would be cool to find a way to add styling

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?

auto grow all columns?

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.

alternating cell fill?

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

Displaying images inside the table

Hi,

Is there a way to display images inside the body of the table

Cannot create property '_renderedContent' on string '['

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)

Error with table.addBody(tableBody)

code": 500,
"message": "unsupported number: NaN",
"stack": "Error: unsupported number: NaN\n at PDFObject.number (

Is it possible to use pdfkit link method to generate hyperlinks inside the table?

How to set header font style as bold for the header of the table

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();
});

How can I add ellipsis to text if it is too long?

cache: false, and renderer first column issue

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

Multiple tables (one by one) and only bottom border

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,
    },
  ]);
}

Table not displaying cells with a value of 0

Steps to reproduce:

pass data with values of 0 to table.addBody()

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}
        ]);

The cells for quantity are empty
with quantity set to 10, 20, 30, here's the PDF:

Is this a bug? Does it have a work-around?

Add sub header inside body

I want to be able to build a table that has headers up top, and then under that it has sub headers.

So basically like this:

ETC.

Is this possible?

How to set next page, not use bold text ??

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);

Dynamic row height

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.

Stripe rows

is there a way to stripe the rows? so every second line should be light grey or something like that?

thx

Change table border opacity

Create Next page

Hi, I'm using this module and have same questions, I don't know create more one page. How I do?

Can renderer use two links per cell in a voilab-pdf-table?

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); `

What are the set of params that we can add to .setColumnsDefaults and each column obj in .addColumns?

Can we create two or more tables in once PDF using this library?

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!