Is it possible to create an annotation tool to make a link to other pdf page?
Hi Nuttakit,
It is possible to create a custom annotation to make an intra-document link. Basically all you need to do is create a link and add a GoTo action that when clicked sends the user to a destination within the document. The following is an example of how you would add the GoTo action to a Link annotation:
-
Webviewer({
-
initialDoc: …,
-
path: ‘/lib’,
-
}, document.getElementById(‘viewer’)).then(instance => {
-
const { Annotations, docViewer, Actions } = instance
-
const rect = new Annotations.Rect(10,10,10,10)
-
const link = new Annotations.Link({ rect: rect})
-
link.setWidth(100)
-
link.setHeight(100)
-
link.PageNumber = 1
-
const destination = new Actions.GoTo.Dest({ page: 4})
-
const goToAction = new Actions.GoTo({dest: destination})
-
link.addAction(‘U’, goToAction);
-
const annotManager = docViewer.getAnnotationManager()
-
annotManager.addAnnotation(link)
-
});
You can read more about the GoTo action and the Dest object here:
To create a custom annotation you can follow this guide.
Let me know if you have further questions.
Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.
www.pdftron.com
CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.
Thank you Armando
how can I add an label to Annotations.Link? If I want to have a Text link like “click here to go to page X”?
I did this on mouse mouseLeftUp however the text not show up and I need to open and close menu before the rect box show up and can click the link
const CustomLinkCreateTool = function () {
Tools.GenericAnnotationCreateTool.call(this, docViewer, Annotations.Link);
};
CustomLinkCreateTool.prototype.mouseLeftUp = async function (evt) {
console.log(evt);
Tools.GenericAnnotationCreateTool.prototype.mouseLeftDown.call(this, evt);
if (this.annotation) {
// const page3 = await docViewer.getPage(3);
const linkAnnot = this.annotation;
linkAnnot.setContents(‘Link to page’);
linkAnnot.addAction(‘U’, new Actions.URI({ uri: ‘https://pdftron.com’ }));
linkAnnot.Width = 100;
linkAnnot.Height = 25;
linkAnnot.Listable = true;
console.log(linkAnnot);
// docViewer.getAnnotationManager().addAnnotation(linkAnnot);
docViewer.getAnnotationManager().redrawAnnotation(linkAnnot);
Tools.GenericAnnotationCreateTool.prototype.mouseLeftUp.call(this, evt);
}
};
Hi Nuttakit,
The link annotation does not have a content property; so calling setContents will not set the text as you expected. You will need to have a textbox or text on the document, and then overlay the link annotation with whatever action you need (such as opening a link or going somewhere else in the document). In your sample code you would simply create the text annotation along with the link annotation.
Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.
www.pdftron.com
CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.