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

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

WamakshiWamakshi Posts: 11Questions: 4Answers: 1

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!

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Hi @Wamakshi ,

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

    Cheers,

    Colin

  • WamakshiWamakshi Posts: 11Questions: 4Answers: 1

    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?

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • WamakshiWamakshi Posts: 11Questions: 4Answers: 1

    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.

  • allanallan Posts: 61,449Questions: 1Answers: 10,055 Site admin
    Answer ✓

    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

  • WamakshiWamakshi Posts: 11Questions: 4Answers: 1
    Answer ✓

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

  • allanallan Posts: 61,449Questions: 1Answers: 10,055 Site admin

    Nice one - thanks for posting back.

    Allan

This discussion has been closed.