voilab / voilab-pdf-table

PdfKit wrapper that helps to draw informations in simple tables
MIT License
52 stars 26 forks source link

How to set two different links in one line. #44

Open bso-oo opened 3 years ago

bso-oo commented 3 years ago

`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

image

two different links in one line.

please ㅠㅡㅠ

tafel commented 3 years ago

Hello, here you really have to check with PDFKit documentation, on how to write in a same line texts that have different formatting.

You can read the doc here on how to have normal text, followed by text with a link, and text with an other link.

bso-oo commented 3 years ago

Hello, here you really have to check with PDFKit documentation, on how to write in a same line texts that have different formatting.

You can read the doc here on how to have normal text, followed by text with a link, and text with an other link.

is it possible to table????

tafel commented 3 years ago

You can do this by using standard methods from PDFkit, and cache: false in the column definition:

{
    id: 'description',
    header: 'Product',
    align: 'left',
    cache: false,
    renderer(tb, data, draw, column, pos) {
        if (!draw) {
            // Calculating cell size content. We build
            // the complete string (without links)
            return `${data.description} ( dm pc )`;
        }
        // Drawing cell content. We use standard PDFkit
        // methods
        tb.pdf
            .text(data.description, pos.x, pos.y, { continued: true })
            .text(' ( ', { continued: true })
            .fillColor('blue')
            .text('dm', {
                continued: true,
                underline: true,
                link: data.link1
            })
            .text(' ', { continued: true, underline: false })
            .text('pc', {
                continued: true,
                underline: true,
                link: data.link2
            })
            .fillColor('black')
            .text(' )', { underline: false });
    }
},

With some data looking like this:

[
    { 
        description: 'Product 2', 
        link1: 'https://www.wikipedia.org', 
        link2: 'https://www.gnu.org', 
        quantity: 4 
    }
]