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

Community Beginner ,
Jun 30, 2022 Jun 30, 2022

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.

TOPICS
PDF Embed API

Views

78

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Beginner , Jul 01, 2022 Jul 01, 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.

Likes

Translate

Translate
Community Beginner ,
Jul 01, 2022 Jul 01, 2022

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 04, 2022 Jul 04, 2022

Copy link to clipboard

Copied

LATEST

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

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources