We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Add a FreeText annotation programmatically

Hi,

Can you tell me how to add FreeText annotation in our PDF viewer programmatically? Let's say I have a custom button in my application and clicking the button should add the free text annotation at specific location in the PDF viewer.

Let me know.

Thanks


3 Replies

CK Chinnamunia Karthik Chinna Thambi Syncfusion Team December 30, 2022 12:33 PM UTC

Refer the below code snippet and sample to add the free text annotation at a specific location in the PDF viewer.


Code snippet:


 

  addFreeText() {

    var pdfViewer = (<any>document.getElementById('pdfViewer'))

      .ej2_instances[0];

      pdfViewer.annotation.addAnnotation("FreeText", {

        offset: {x: 100, y: 100}, 

        fontSize:16, 

        fontFamily: "Helvetica", 

        pageNumber: 1, 

        width: 200, 

        height: 40, 

        isLock: false, 

        defaultText: "Syncfusion",

      })

  }


Sample: https://stackblitz.com/edit/angular-sjkja5-f7zlkv?file=app.component.html,app.component.ts,package.json



SR Sriraman December 31, 2022 05:28 AM UTC

Thanks for your reply.

  1. Is there anyway to get the annotation ID of the newly added free text annotation?
    I can loop through the annotation collection and get the free text annotation. But if there are multiple free text annotations added at the same time, how we can identify the one which we added now.
    or is it possible to pass some ID while creating new free text annotation?
  2. How to update the content of an existing Free text annotation programmatically.
  3. How to move the free text annotation programmatically.


CK Chinnamunia Karthik Chinna Thambi Syncfusion Team January 3, 2023 04:57 PM UTC

Find the details for the respective queries


Is there anyway to get the annotation ID of the newly added free text annotation?
I can loop through the annotation collection and get the free text annotation. But if there are multiple free text annotations added at the same time, how we can identify the one which we added now.
or is it possible to pass some ID while creating new free text annotation?

Yes, while adding the annotation in the PDF Viewer annotationAdd event is triggered by using this event you can get the newly added annotation id. Refer the below code snippet and sample to get the newly added free text annotation id in the console.


Code snippet:

 

  public add(args){

    if (args.annotationType === "FreeText"){

      console.log("annotationId:" + args.annotationId); 

    }

  }

 

Sample: https://stackblitz.com/edit/angular-dxub1a-mlhlgn?file=app.component.ts,app.component.html,package.json,index.html

How to update the content of an existing Free text annotation programmatically.

Refer the below code snippet and sample to change the content of an existing Free text annotation programmatically.

 

Code snippet:

 

  changeContent() {

    var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];

    for (let i = 0; i < viewer.annotationCollection.length; i++) {

      if (viewer.annotationCollection[i].subject === "Text Box") {

        viewer.annotationCollection[i].dynamicText = 'syncfusion'; 

        viewer.annotation.editAnnotation(viewer.annotationCollection[i]);

      }

    }

  }


Sample: https://stackblitz.com/edit/angular-dxub1a-zzjmnt?file=app.component.ts,app.component.html,package.json,index.html

How to move the free text annotation programmatically.

Refer the below code snippet and sample to  move the free text annotation programmatically.

Code snippet:
 

  moveFreeText() {

    var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];

    for (let i = 0; i < viewer.annotationCollection.length; i++) {

      if (viewer.annotationCollection[i].subject === "Text Box") {

        var width = viewer.annotationCollection[i].bounds.width;

        var heigth = viewer.annotationCollection[i].bounds.height;

        viewer.annotationCollection[i].bounds = {x : 100, y: 100, width: width, height: heigth }; 

        viewer.annotation.editAnnotation(viewer.annotationCollection[i]);

      }

    }

  }


Sample: https://stackblitz.com/edit/angular-dxub1a-rddbxs?file=app.component.ts,app.component.html,package.json,index.html


Loader.
Up arrow icon