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

[jayanth0907]

No description provided.

[tafel]

Hi, you can add link: "https://mysite.com" in your column configuration. You can use all that pdfkit.text() accepts, like underline, link, strike, etc.

And you can change the text color using cache: false, renderer: Function in your column. For example:

{
    id: 'description',
    header: 'Product',
    cache: false,
    renderer(tb, data, draw) {
        if (draw) { 
            tb.pdf.fillColor('red'); return data.description
        }
        return ``;
    }
}

[iwanwmys]

Hi @tafel thanks so much for your description here, however, I am struggling a bit to get a link to actually work, can you perhaps show what the column configuration should look like for passing a dynamic link into a field? Thanks so much!

Here's what I have, I've also tried different variations, but I'm just not sure how to do that. Thanks

.addColumns([
            {
                id: 'fileName',
                header: 'File Name',
                align: 'left',
            },
            {
                id: 'folder',
                header: 'Folder',
                align: 'left',
                width: 80
            },
            {
                id: 'link',
                header: 'URL',
                align: 'left',
                width: 250,
                link: function (data) {
                    return data.link
                }
            }
        ])

[tafel]

When you have special needs, like dynamic links or images, you will need to manage yourself the drawing. Here's an example of how to add your dynamic link:

// column definition
{
    id: 'description',
    header: 'Product',
    align: 'left',
    link: 'https://duckduckgo.com/?q=xxx',
    cache: false,
    renderer(tb, data, draw, column, pos) {
        if (!draw) {
            // we are calculating cell height. We only need text now.
            return data.description;
        } else {
            // we are drawing content on the page. You probably will
            // need to adjust `pos.x` and `pos.y` as well as cell width,
            // depending on the cell padding you want.
            tb.pdf.text(data.description, pos.x, pos.y, {
                ...column,
                link: column.link.replace('xxx', data.id),
                height: data._renderedContent.height, // this value is automatically calculated
                width: column.width
            });
        }
    }
}

// sample data
{ id: 'abc', description: 'Product 1' }

[iwanwmys]

That is exactly what I needed, thank you very much!

[iwanwmys]

@tafel Just letting you know your solution worked, thanks :)

[bso-oo]

Do you know how to apply font or change color?
Also, can you fill in the column only?

[bso-oo]

When you have special needs, like dynamic links or images, you will need to manage yourself the drawing. Here's an example of how to add your dynamic link:

// column definition
{
    id: 'description',
    header: 'Product',
    align: 'left',
    link: 'https://duckduckgo.com/?q=xxx',
    cache: false,
    renderer(tb, data, draw, column, pos) {
        if (!draw) {
            // we are calculating cell height. We only need text now.
            return data.description;
        } else {
            // we are drawing content on the page. You probably will
            // need to adjust `pos.x` and `pos.y` as well as cell width,
            // depending on the cell padding you want.
            tb.pdf.text(data.description, pos.x, pos.y, {
                ...column,
                link: column.link.replace('xxx', data.id),
                height: data._renderedContent.height, // this value is automatically calculated
                width: column.width
            });
        }
    }
}

// sample data
{ id: 'abc', description: 'Product 1' }

Do you know how to apply font or change color?
Also, can you fill in the column only?