Make Backend Annotations Non-Editable

[Eslam Gohar]

I have an issue after adding Header/Barcode/Stamp annotations like images (coming from backend services) to the PDF file, and clicking the "Confirm" button to confirm and save the annotations on the PDF file. Still, I can edit these annotations (Select/Move/Resize/Cut/Copy/Delete).

So, I want to find a solution to disable these features (Select/Move/Resize/Cut/Copy/Delete) after confirmation and make the PDF file read-only (Non-draggable, non-editable, non-deletable).

Check the components and the code below, and help me to resolve this issue.

FYI, I have used these versions of the PDF Viewer components 

"@syncfusion/ej2-pdf": "~27.2.5",

"@syncfusion/ej2-pdf-export": "~27.2.2",

"@syncfusion/ej2-pdfviewer": "~27.2.5",

Here's the code Snippet: 
https://stackblitz.com/edit/stackblitz-starters-exiuz9ma

[Venkada Subramanian Durai]

Hi Eslam Gohar,

Thank you for the update. We were unable to run the provided StackBlitz project to replicate the reported issue, as it is not functioning properly.

However, upon reviewing the shared code, we observed the following:
 

• The annotationSettings API is currently configured to lock the annotations
• The allowedInteractions API has been set to allow Move, Resize, and Select interactions
   

If your requirement is to completely lock the annotations in the PDF document, we recommend setting isLock to true and removing the allowedInteractions configuration. By default, this will disable all interactions.
 

Additionally, could you please share the PDF document you are using for testing? This will help us validate the scenario from our end and provide more accurate feedback.

We also recommend upgrading to the latest version of the PDF Viewer (v33.2.12) to benefit from recent bug fixes and performance improvements.
 

Code snippet:
 

   this.documentViewerObj.annotationSettings = {

     author: 'System',

     isLock: true,

   };

 

Sample project we have tested

UG for annotation permissions in PDF Viewer

 
Regards,
Venkada Subramanian D

[Eslam Gohar]

Hi, I tried adding `isLock: true` to the annotationSettings and upgrading the PDF Viewer package, but it didn't work. Let me explain the scenario again: I have three annotations retrieved from backend endpoints (Header, Barcode, Stamp), which are images displayed on a PDF file. These annotations can be selected, resized, and moved (draggable) within the PDF Viewer. However, once I want after making edit to any of these annotations to the PDF and click on the `Confirm` button, I want them to become Non-Editables. This means they should no longer be selectable, resizable, or draggable, effectively merging them into the PDF page content.
I use the '@syncfusion/ej2-angular-pdfviewer' package in the `dataAttachmentViewerComponent` component. You can review the components.

[Venkada Subramanian Durai]

Hi Eslam Gohar,

Thank you for the update. To dynamically lock annotations in the PDF Viewer after editing, we recommend using the editAnnotation API. We observed that in your current implementation of the onConfirm function, the locking of annotations is not handled correctly, and the editAnnotation API is not being used as intended.

To address this, we suggest updating your implementation to dynamically lock the annotations by restricting all interactions, and then saving the PDF with the locked annotations. Please refer to the sample code provided below.

We have also shared a video for your reference. Kindly review it and let us know if it meets your requirements.

If you continue to face any issues, please modify the attached sample project to replicate the problem, and share it along with the PDF document containing the annotations you tested. This will help us analyze the issue and provide a more accurate solution. If you have any questions, feel free to reach out.
 

Code snippet:
 

 async onConfirm(): Promise<void> {

   if (!this.documentViewerObj) return;

 

   const viewer: any = this.documentViewerObj;

 

   const annotationModule = viewer.annotation || viewer.annotationModule;

   const annotations = viewer.annotationCollection;

   annotations.forEach((a: any) => {

     a.annotationSettings.isLock = true;

     a.allowedInteractions = [AllowedInteraction.None];

     annotationModule.editAnnotation?.(a);

   });

 

   viewer.saveAsBlob().then((blobData) => {

     const reader = new FileReader();

     reader.onload = () => {

       const base64data = reader.result;

       console.log(base64data);

     };

     reader.readAsDataURL(blobData);

   });

 }

Sample project for locking the annotations dynamically

Regards,
Venkada Subramanian D

Attachment: lockannotationsinpdfviewer_40d0879e.zip

[Eslam Gohar]

Thanks a lot. It works now as I want. With your solution and some refactors I made to the whole code, the annotations became non-editable after confirming the additions.

[Venkada Subramanian Durai]

Hi Eslam Gohar ,

Thanks for the update. Please ping us if you need any assistance or any further requirements

Regards,
Venkada Subramanian D