How to add text with a link in V1.x.x

[Ashish-Tomar]

Hey @Hopding, Fantastic job with the library!

The code example to create text weblink under #45 doesn't work anymore due to changes in the object names and functions.

Would it be possible to provide an updated example?

Thanks in advance.

[Hopding]

Hello @Ashish-Tomar!

Here's the example from #45 updated for v1.x.x:

import { PDFDocument, PDFName, PDFString, rgb, StandardFonts } from 'pdf-lib';

/* (1) Create a new PDF document */
const pdfDoc = await PDFDocument.create();

/* (2) Embed a standard font within the document */
const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);

/* (3) Define constants for the page's width and height */
const PAGE_WIDTH = 500;
const PAGE_HEIGHT = 500;

/* (4) Create the link annotation object and ref */
const linkAnnotation = pdfDoc.context.obj({
  Type: 'Annot',
  Subtype: 'Link',
  Rect: [145, PAGE_HEIGHT / 2 - 5, 358, PAGE_HEIGHT / 2 + 15],
  Border: [0, 0, 2],
  C: [0, 0, 1],
  A: {
    Type: 'Action',
    S: 'URI',
    URI: PDFString.of('https://github.com/Hopding/pdf-lib'),
  },
});
const linkAnnotationRef = pdfDoc.context.register(linkAnnotation);

/* (5) Create a page and it to the PDF document */
const page = pdfDoc.addPage([PAGE_WIDTH, PAGE_HEIGHT]);

/* (6) Draw some text for the link to be placed over */
page.drawText('Link to the pdf-lib GitHub Repo', {
  x: 150,
  y: PAGE_HEIGHT / 2,
  font: helveticaFont,
  size: 15,
  color: rgb(0, 0, 1),
});

/* (7) Add the link to the page */
page.node.set(PDFName.of('Annots'), pdfDoc.context.obj([linkAnnotationRef]));

/* (8) Serialize the PDF document */
const pdfBytes = await pdfDoc.save();

I hope this helps. Please let me know if you have any additional questions!

[Ashish-Tomar]

Thanks, @Hopding! I owe you big time.

If you are ever in Vancouver, Canada, ping me.

[msvargas]

its very useful, but if you want add in existing PDF ,need push must be replace step 7, its very short however i share here to help anybody

...
  const annots = page.node.lookup(PDFName.of('Annots'), PDFArray);
  annots.push(linkAnnotationRef);

or if you need replace link annotation use this #206

for create invisible border use this:

{
...
Border: [0, 0, 0],
...
}

[ryangriggs]

Thanks for providing this example. Could you possibly elaborate on how to make a popup annotation (note) vs hyperlink? The goal would be to attach a note to a specific section of text, allowing the user to click the note and read the note text in a popup box. In Adobe Acrobat Pro you can do this by highlighting some text, then choosing Tools -> Comment & Markup -> Text Edits -> Add Note To Selected Text (as shown below). Then the text becomes highlighted, and clicking the highlight displays the note. I assume when creating the link annotation, a different Type and Subtype are used, but I'm not sure what. Any guidance appreciated!