Link Annotation Visibility

[Andy Thomson]

Hi,

I am writing a POC and looking for some guidance on Links.

I am trying to add a Link Annotation to open an external source (webpage). Basically what I want to achieve is what I get when I export from WebViewer to an external pdf viewer with a trial license and I get a clickable link to www.pdftron.com across the middle of the page. How can I achieve this? So far I have an admittedly basic -

var link = new Annotations.Link();
link.X = 300;
link.Y = 50;
link.Width = 60;
link.Height = 30;
link.setPageNumber(readerControl.docViewer.getCurrentPage());
link.addAction('U', new Actions.URI({ uri: "https://www.google.com" }));

var annotManager = readerControl.docViewer.getAnnotationManager();
link.Author = annotManager.getCurrentUser();
annotManager.addAnnotation(link);
annotManager.drawAnnotations(readerControl.docViewer.getCurrentPage(), null, true);

Sure enough this gives me an invisible, clickable rectangle at the correct coordinates. Beyond this I am having some difficulty achiving what I want regarding -

1. Visibility
I can only see my new link if I add -

link.backgroundColor = new Annotations.Color(36, 249, 136, 1);

Is there anything else I can do to affect it's visibility?


2. Appearance
Can I make it look like anything other than the bounding rectangle with a color fill? Ideally I'd like an image there - I don't suppose I can just pass a base64 string to link.setContents()?

3. Selectability
I can't seem to select the link in the same way I can with other markups on the page. The api suggests that it should inherit the same default selectionModel as the other Annotations but nothing happens when I drag the cursor around it.

4.Exportability
If I export the document and open in another pdf viewer all other annotations I add via WebViewer export perfectly however the link doesn't export at all.

Many thanks in advance for your help.

[Justin Jung]

1 & 2. You can change the appearance and make it visible by modifying the inner element. For example:

var link = new Annotations.Link();  

link.X = 300;

link.Y = 50;

link.Width = 120;

link.Height = 44;

link.setPageNumber(readerControl.docViewer.getCurrentPage());

link.addAction('U', new Actions.URI({ uri: "https://www.google.com" }));

 

var annotManager = readerControl.docViewer.getAnnotationManager();

annotManager.addAnnotation(link);

annotManager.drawAnnotations(readerControl.docViewer.getCurrentPage(), null, true);

link.Author = annotManager.getCurrentUser();

link.getInnerElement().css({

  'background-image': 'url("https://www.google.ca/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png")',

  'background-size': 'contain',

  'background-position': 'center center',

  'background-repeat': 'no-repeat'

});

annotManager.drawAnnotations(readerControl.docViewer.getCurrentPage(), null, true);

3. Correct link annotation are not intended to be selectable.

4. Currently, dynamically-created links and form fields are not merged back to the original pdf when downloading it.

Justin Jung

Software Developer

PDFTron Systems Inc.

[Andy Thomson]

Hi Justin,

thanks for getting back to me, yes that styling works great - much appreciated.

With regard to point 4 if I can't export a Link is there way I can re-package an existing Annotation, or create a custom Annotation which will export visibly with a clickable action assocaited with it? An image ideally, text is fine though.

As I say the pdftron banner that goes across the middle of the page when you download a pdf ona trial license basically does what I want.

Fantastic job with Webviewer btw - you guys are light years ahead of anything else I've seen.

[Justin Jung]

Hi Andy,

Unfortunately, there seems to be no work-around in the client side for now. What you would have to do is programatically add the new link annotation to the pdf using PDFNet on the server.

Also, thanks for the kind words :)