Skip to main content
Z
Zahid Bashir Khan
Participant
July 1, 2022
Answered

Accessing the annotations on Save button or without opening the pdf document

  • July 1, 2022
  • 1 reply
  • 947 views

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.

This topic has been closed for replies.
Correct answer Akshay Rohatgi

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.

1 reply

Akshay Rohatgi
Adobe Employee
Akshay RohatgiCorrect answer
Adobe Employee
July 1, 2022

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.

    Z
    Zahid Bashir KhanAuthor
    Participant
    July 4, 2022

    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();
	});
}, []);

     

     

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices