Hi,
I am using PDFTron library and implement in our project. I am having issue with custom annotation. I am able to populate custom annotation in left panel and it works fine when i click on it, it render correctly on pdf view page with url, But when i saved the pdf through pdftron toolbar and refresh the page then custom annotation populate but without url attach to it. I used PDFTron 6 version.
Hi,
Thanks for reaching out!
We would like to clarify a few things to help you further:
> when i saved the pdf through pdftron toolbar and refresh the page
Are you loading the saved pdf after the page is refreshed? If not, is the saved PDF related to page refreshing?
> without url attach to it
Could you clarify what you mean by the URL attach to it? Could you show us the code and how your custom annotation is supposed to look like?
Thanks,
Zhijie Zhang
Software Developer
PDFTron Systems Inc.
HI
Are you loading the saved pdf after the page is refreshed? If not, is the saved PDF related to page refreshing?
Yes after saving pdf and refreshing the page link doesnt work either in pdf or on PDFTron viewer.
Could you clarify what you mean by the URL attach to it? Could you show us the code and how your custom annotation is supposed to look like?
We are adding links to annotation programmatically in our custom annotation and works fine when save before reloading page. Below is the code snippet we are using to create a custom annotation.
onClick: function (originalEvent, element, docViewer, annotations, fileInfo) {
if (!element.dataset.wpcode.length) return;
var annotManager = docViewer.getAnnotationManager();
var stampAnnot = new annotations.StampAnnotation();
var svgWidth = element.querySelector(’#wpReferenceLabel’).clientWidth / 3;
var pdfCoords = pdfUtils.calculateDropInCoordinatesByCustomLeftPanelClick(originalEvent, docViewer, {width: svgWidth, height: 55});
var dropIn = pdfCoords.y * docViewer.getZoom();
var stamp = pdfUtils.initCustomStamp(
annotManager.getCurrentUser(),
docViewer.getCurrentPage(),
svgWidth,
55,
“wpReference”,
{ uri: element.dataset.wplink, ref: element.dataset.wpref, code: element.dataset.wpcode, ypos: dropIn, xpos: pdfCoords.x },
stampAnnot
);
if (pdfUtils.isEdge()) {
pdfUtils.getCreateStampImageData(‘wp’, element.dataset.wpcode, svgWidth, [], function(img) {
var imagedata = ‘data:image/png;base64,’ + decodeURIComponent(img.imagedata);
pdfUtils.redrawLeftPanelStampImage(imagedata, img.size.width, img.size.height, dropIn, stamp, annotManager);
});
} else {
var svgContent = pdfUtils.createSVGForLeftPanelStamp(‘wp’, svgWidth, 55, fileInfo, element);
setTimeout(pdfUtils.convertSVG2PNG64(‘workpaperStampCanvas’, ‘data:image/svg+xml;utf-8,’ + svgContent, 100, 55, function (s) {
pdfUtils.redrawLeftPanelStampImage(s, pdfCoords, dropIn, stamp, annotManager);
}), 0);
}
}
What approach we can use to make it work when it becomes part of PDF?
Hi Mudassar,
Thanks for sharing that code snippet.
I see that you add the URI as part of an object when you create your custom annotation, which you are probably attaching to the stamp. This property is not part of the PDF spec, so thats why it is getting lost when you refresh or try to open the document in another reader.
One approach we can suggest, and the one we use in WebViewer, is to create a Link annotation, and then group the Link annotation and your Custom annotation together.
The following code shows how we create a Link annotation and add a URI:
https://github.com/PDFTron/webviewer-ui/blob/7.3/src/components/LinkModal/LinkModal.js#L134
https://github.com/PDFTron/webviewer-ui/blob/7.3/src/components/LinkModal/LinkModal.js#L48
Here is the API to associate Links with annotations:
https://www.pdftron.com/api/web/Annotations.Annotation.html#associateLink__anchor
Let me know if you have any questions about this approach, I am happy to help.
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.
Check your ticket status - https://support.pdftron.com/helpdesk/tickets/20161
Thank you for your help, we are able to add link to our annotation. But one thing missing how we can add url to this link, so when the user click on the link user goes to URL. We have tried
Actions.URI.
var link = new annotations.Link();
link.PageNumber = docViewer.getCurrentPage();
link.StrokeColor = new annotations.Color(0, 165, 228);
link.StrokeStyle = ‘underline’;
link.StrokeThickness = 2;
link.Author = annotManager.getCurrentUser();
link.Subject = ‘Link’;
link.X = pdfCoords.x;
link.Y = dropIn-30;
link.Width = svgWidth+30;
link.Height = 2;
var linkHref = new Actions.URI({
uri: ‘https://www.pdftron.com’,
});
link.addAction(
‘U’,
linkHref
);
But we are getting this error “Uncaught ReferenceError: Actions is not defined”.
Hi Mudassar,
It looks like you are simply missing the definition of “Actions”. You can get that from your instance as follows:
Webviewer({
initialDoc: hashFile,
path: ‘/lib’,
}, document.getElementById(‘viewer’)).then(instance => {
const { Actions } = instance; /// Actions is in the instance
});
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, we are getting closer. We are able to add link and its working fine. But we are facing two issues:
1- We are attaching the link to custom annotations.StampAnnotation, but issue is link is not rendered until we refresh the page. Our annotations.StampAnnotation renders perfectly.
2- When we drag the annotations StampAnnotation, link does move with StampAnnotation.
Below is the code
var link = new annotations.Link();
link.PageNumber = docViewer.getCurrentPage();
link.StrokeColor = new annotations.Color(0, 165, 228);
link.StrokeStyle = ‘underline’;
link.StrokeThickness = 2;
link.Author = annotManager.getCurrentUser();
link.Subject = ‘Link’;
link.X = originalEvent.pageX;
link.Y = originalEvent.pageY;
link.Width = 100;
link.Height = 5;
console.log(pdfCoords, originalEvent , dropIn);
var linkHref = new currentPDFTronInstance.Actions.URI({
uri: ‘https://www.pdftron.com’,
});
link.addAction(
‘U’,
linkHref
);
var stampAnnot = new annotations.StampAnnotation();
stampAnnot.associateLink([link.Id]);
annotManager.updateAnnotation(link);
annotManager.addAnnotation(link);
annotManager.redrawAnnotation(link);
Hey Mudassar,
The links are a special case of annotation, and you need to do a hard redraw of the page to get them to show after you add them to the annotation manager.
You would need to do:
https://www.pdftron.com/api/web/CoreControls.AnnotationManager.html#drawAnnotations__anchor
annotationManager.drawAnnotations(pageThatHasYourLink, null, true) // The third parameter is for a hard redraw.
For your second question, do you mean the link does move, or does not move?
If it does not move, have you made sure you have associated them? If you have and still have the issue please send me the whole code with stamp + link and I will have a look at my end.
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.
Hi
we are adding a stamp annotation and attaching a link to that stamp annotation. That works perfectly fine.
Following is the code:
var stampAnnot = new annotations.StampAnnotation();
var link = new annotations.Link();
var linkHref = new currentPDFTronInstance.Actions.URI({
uri: element.dataset.wplink,
});
link.addAction(
'U',
linkHref
);
stampAnnot.associateLink([link.Id]);
annotManager.updateAnnotation(link);
annotManager.addAnnotation(link);
annotManager.redrawAnnotation(link);
annotManager.drawAnnotations(docViewer.getCurrentPage(), null, true);
Now we facing an issue on adding the annotation, on adding, we are getting two xmls. One for stamp annotation and other link annotation. But after dragging we get a single annotation with link annotation as child.
How we can add link annotation to stamp Annotation as child on adding, just like on dragging.
Attached are the two XMLS on adding and other on dragging.
Mudassar
addTimeXML.xml (2.3 KB) afterDragXML.xml (2.6 KB)
Hello,
The behaviour you are seeing is what is expected. A link annotation is separate from the stamp annotation, and are simply linked together when you call associateLink. I am not sure quite what you mean by child annotation, but if you are referring to the following, it is simply how we link the two internally:
<trn-custom-data bytes**="{“trn-link-id”:[“471713f4-40a1-b0cf-40b3-8c013c0f614d”]}"/>**
This links the ID of the Link Annotation to your Stamp Annotation. The link annotation still exists as XFDF and you can verify by exporting the XFDF of the document.
It seems to me that you are doing things correctly.
Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.
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.
Hi
What we mean by child annotation is, if you look into the addTimeXML, you will not find any tag related to the link. In add tag only one annotation that is stamp. But in case of afterDragXML in modify tag there are two tags one for link and other for stamp. We want to generate same xml in case of addition as well.
Why we want this is because on adding new annotation with link stamp it is not linked, so on clicking it does nothing, only link below is clickable reason is both has separate XMLs. But on dragging the new XML has both in it, by which stamp become clickable
Mudassar
Hi Mudassar,
I am still not sure I follow what you are seeing, but I wrote some code to verify the sample works as expected (this is in 7.3):
// Add listener to verify link and stamp are added at the same time
annotManager.on('annotationChanged', (annotations, action, info) => {
if (action == 'add' && !info.imported) {
console.log({ annotations })
}
})
// Add stamp and link on doc loaded
docViewer.on('documentLoaded', () => {
const x = 200;
const y = 200;
const width = 200;
const height = 100;
const url = 'www.google.com'
const pageNumber = 1;
var stampAnnot = new Annotations.StampAnnotation();
stampAnnot.setX(x);
stampAnnot.setY(y);
stampAnnot.Icon = 'Approved';
stampAnnot.Width = width;
stampAnnot.Height = height;
stampAnnot.PageNumber = pageNumber;
// Create Link Annotation
const link = new Annotations.Link();
link.PageNumber = pageNumber;
link.StrokeColor = new Annotations.Color(0, 165, 228);
link.StrokeStyle = 'underline';
link.StrokeThickness = 2;
link.Subject = 'Link';
link.setX(x);
link.setY(y);
link.Width = width;
link.Height = height;
// Create action
const action = new Actions.URI({ uri: url });
// Add action to link
link.addAction('U', action);
// Add stamp and link to annotationManager
annotManager.addAnnotations([stampAnnot, link])
stampAnnot.associateLink([link.Id]);
annotManager.drawAnnotations(pageNumber, null, true);
})
When I open a doc, I see my stamp added and the stamp is a clickable link. When I drag it, it moves the link along with it. In my console, I see both the stamp and the annotation being added at the same time.
Can you verify this works on your end?
Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.
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.
Hi
I have attached a video to demonstrate our issue. We are doing the same way as shared in code snippet above.
Basically, if you see after adding the custom annotation is not clickable but the line under it is clickable. In another case after dragging and save both are clickable. If we look at the XML generated in first case there are two xml. But after dragging and save both link and annotation are combine in one XML.
I hope its more understandable now. Let me know if it’s not. Thanks
Hi Mudsassar,
I’ve requested access to the video to see the issue. Let me know when this is granted.
Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.
Hi Armando
Access is granted
Hi Mudassar,
Thanks for sharing that. I am still not sure what is going on based on the video.
Up to timestamp 0:16 you add a custom annotation with a link. Is this done using code similar to what I shared? When you click on this annotation does it take you to the link? Does this annotation work as expected?
You then run some custom logic to export the annotations and re-load them into a new PDF?
Can you share the code for what this custom logic is doing?
If I understand correctly, your issue happens after you run your custom code, and not when you add the annotation the first time?
It seems there is something happening when you export and reload, but it is hard to tell on my end as that is custom code. When I add a stamp with a link using the code above it works as expected on my end.
Please share any custom code you are using to add the stamps, and to export and reload, as this will help sort out on my end what is going on.
Thanks!
Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.