Copy link to clipboard
Copied
I want to access/get the annotations upon the save button click. As from the code in adobe pdf embed api sample here on github, I am able to access/ console.log() the annotations on document load but in case a user adds more annotations to the loaded document and clicks the save button, I need to access those annotations and save it somewhere in external json or database.
Here is my react code
useEffect(() => {
const viewSDKClient = new ViewSDKClient();
viewSDKClient.ready().then(() => {
/* Invoke file preview */
/* By default the embed mode will be Full Window */
const previewFilePromise = viewSDKClient.previewFile("pdf-div", { enableAnnotationAPIs: true, includePDFAnnotations: true }, fileUrl);
previewFilePromise
.then((adobeViewer) => {
adobeViewer.getAnnotationManager()
.then(annotationManager => {
annotationManager.getAnnotations()
.then(result => {
console.log("GET all annotations", result);
})
.catch(e => {
console.log(e);
});
})
.catch(e => {
console.log(e);
});
})
.catch(e => {
console.log(e);
});
//TODO: access the annotations inside the saveapi handler
viewSDKClient.registerSaveApiHandler();
viewSDKClient.registerGetUserProfileApiHandler();
});
}, []);
Please let me know in case more info is required from my end.
Hi @Zahid Bashir Khan
Thanks a lot for using PDF Embed API.
As such on save you wont get the new annotation events added but you can use the below annotation APIs https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/#annotationmanager-interface to collect the annotations in a local array. When user clicks on save button in your code, you can flush the local array to the external DB.
Please try that out and let us know in case you face any issues.
Copy link to clipboard
Copied
Hi @Zahid Bashir Khan
Thanks a lot for using PDF Embed API.
As such on save you wont get the new annotation events added but you can use the below annotation APIs https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/#annotatio... to collect the annotations in a local array. When user clicks on save button in your code, you can flush the local array to the external DB.
Please try that out and let us know in case you face any issues.
Copy link to clipboard
Copied
Thanks, it worked. Here is what I did in order to achieve the desired result
1. Defined a property on the ViewSDKClient class, inside the constructor
this.annots = [];
2. Registered the event listener
useEffect(() => {
const viewSDKClient = new ViewSDKClient();
viewSDKClient.ready().then(() => {
const previewFilePromise = viewSDKClient.previewFile("pdf-div", { enableAnnotationAPIs: true, includePDFAnnotations: true }, fileUrl);
const eventOptions = {
listenOn: [
"ANNOTATION_ADDED", "ANNOTATION_UPDATED", "ANNOTATION_DELETED"
]
}
previewFilePromise
.then((adobeViewer) => {
adobeViewer.getAnnotationManager()
.then(annotationManager => {
annotationManager.getAnnotations()
.then(result => {
console.log("GET all annotations", result);
viewSDKClient.annots = result;
console.log('viewSDKClient.annots in init');
console.log(viewSDKClient.annots);
})
.catch(e => {
console.log(e);
});
annotationManager.registerEventListener(
function (event) {
console.log(event.type, event.data)
if (event.type === 'ANNOTATION_ADDED') {
viewSDKClient.annots = [...viewSDKClient.annots, event.data];
} else if (event.type === 'ANNOTATION_UPDATED') {
viewSDKClient.annots = [...(viewSDKClient.annots.filter(a => a.id !== event.data.id)), event.data]
} else if (event.type === 'ANNOTATION_DELETED') {
viewSDKClient.annots = viewSDKClient.annots.filter(a => a.id !== event.data.id);
}
},
eventOptions
);
})
.catch(e => {
console.log(e);
});
})
.catch(e => {
console.log(e);
});
viewSDKClient.registerSaveApiHandler();
viewSDKClient.registerGetUserProfileApiHandler();
});
}, []);