How to add custom Annotations React JS

Technical Support
, , ,
1

Product: pdftron/webviewer

Product Version:“@pdftron/webviewer”: “^10.4.0”,

Please give a brief summary of your issue:
i create custom button in header on its click its generate custom annotations
it working but on annotationManager.exportAnnotations() its generate error

error is:webviewer-core.min.js:269 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘slice’)

Please describe your issue and provide steps to reproduce it:

       header.push({
            type: "customElement",
            render: () => {
              const textBoxButton = document.createElement("button");
              textBoxButton.textContent = "Add Annotation";
              textBoxButton.addEventListener("click", async () => {
          
                // Create a new FreeTextAnnotation
                const annotation = new Annotations.FreeTextAnnotation(
                  Annotations.FreeTextAnnotation.Intent.FreeText,
                  {
                    PageNumber: 1,
                    X: 100,
                    Y: 100,
                    Width: 200,
                    Height: 50,
                    TextAlign: "center",
                    TextVerticalAlign: "middle",
                    Contents: "Sample Text",
                    Subject: "CustomAnnotation",
                  }
                );
          
                // Add the annotation to the document
                annotationManager.addAnnotation(annotation);
                annotationManager.redrawAnnotation(annotation);
          
                // Optionally, you can export the annotations to XFDF format
                const xfdfString = await annotationManager.exportAnnotations();
                console.log("XFDF String:", xfdfString);
              });
          
              return textBoxButton;
            },
          });

Please provide a link to a minimal sample where the issue is reproducible:

1 Like
2

Hi there,

Could you try creating the annotation using the following code instead?

          const annotation = new Annotations.FreeTextAnnotation();
          annotation.PageNumber = 1; 
          annotation.X = 100; 
          annotation.Y = 100;
          annotation.Width = 200;
          annotation.Height = 50; 
          annotation.TextAlign = 'center';
          annotation.TextVerticalAlign = 'center';
          annotation.setContents('Sample Text'); 
          annotation.Intent = Annotations.FreeTextAnnotation.Intent.FreeText; // Set the intent to FreeText
          annotation.Subject = 'CustomAnnotation';

          // Add the annotation to the document
          annotationManager.addAnnotation(annotation);
          annotationManager.redrawAnnotation(annotation);

Best Regards,
Darian

1 Like
3

thank you its working prefect

1 Like
4

a small help also required
can we disable its resize and also its dragging function?

1 Like
5

Hello,

You can add these two properties to disable the resizing and moving.

annotation.NoResize = true;
annotation.NoMove = true;

You can find a list of other properties you can change here: Apryse WebViewer Class: Annotation

Best Regards,
Darian

1 Like