How to add hyperlink in exported pdf, with different text than link which open in different tab

Wamakshi

I am trying to export pdf for tables having hyperlinks. At the same time, I need the text in the column to be different than the link and it should redirect in a different tab.
I am still not able to set the text from different column data and it does not open in a different tab.

Here's what I have tried:

buttons: [
    {
        extend: 'pdf',
        exportOptions: { orthogonal: 'pdf' },
    }],
        columns: [
        {  "data": "information" }, 
        { 
           "data": "weblink",
           "render": function (data, type, row) { 
            if (type === 'export') // for PDF
                return '<a href="' + data + '" target="_blank">' + data + '</a>';
            else
                return data;
            }
        } 
     ]

I have tried this also in the render function, but it then removes the link and just shows as text:

render": function (data, type, row) { 
            if (type === 'export') // for PDF
                return '<a href="' + data + '" target="_blank">' + row.linkName+ '</a>';
            else
                return data;
            }
        } 

Any help would be much appreciated, Thank you!

colin

Hi @Wamakshi ,

Your syntax is slightly wrong, see example here - that should get you going,

Cheers,

Colin

Wamakshi

Hi @colin
Thanks for your reply. I did notice from your example that I mentioned wrong string to check for type in render function. It did not seem to work.

Moreover, it seems like the render function removes the anchor tag and just keeps the text. Is that so? Or is there any other way to add hyperlinks in pdf?

colin

Hi @Wamakshi ,

That's probably because you haven't set stripHtml to be false (default is true). See this thread here for examples,

Cheers,

Colin

Wamakshi

Hi @colin
This is the example that I am trying to work with: https://jsbin.com/fobasan/edit?html,js,output
By setting stripHtml to false, it does keep the tag but prints it as it is in pdf.

allan

You'd need to use the pdfmake documentation to see how to create links with their API - specifically see here. It doesn't interpret HTML, it uses its own JSON structure.

Allan

Wamakshi

Hi @allan
I made these changes in the customize function:

customize: function (doc) {
            for (var row = 1; row < doc.content[1].table.body.length; row++) {
                doc.content[1].table.body[row][1] = {text: 'google', link: 'https://www.google.com/', style: {decoration: 'underline'}};
              }
        }

This worked for me. ! Thanks a lot ! !

allan

Nice one - thanks for posting back.

Allan