Add PDF-lib form fields in annotationLayer

[perljuls]

Hi,

Is it possible to add PDF-lib's form fields in annotationLayer as I want to move & resize these fields in the pdf?

<button (click)="addTextField()">Add Text Field</button>
  <ngx-extended-pdf-viewer
        #pdfViewer
        [src]="pdfSrc"
        [textLayer]=true
        [zoom]="'auto'"
        [enableDragAndDrop]="true"
        [showToolbar]="false"
  />   

  async addTextField() {
      this.getPdfBytesFromStaticFile(this.pdfSrc)
      .then(existingPdfBytes => {
        const pdfDoc = PDFDocument.load(existingPdfBytes);
        pdfDoc.then(doc => {        
            const page = doc.getPages()[0];
            const nameField = doc.getForm().createTextField('nameField');
            nameField.setText('Enter your name');
            nameField.addToPage(page, { x: 50, y: 700, width: 200, height: 20 });  
          return doc.save();
        }).then(modifiedPdfBytes => {
          const bytes  = new Uint8Array( modifiedPdfBytes ); 
          this.pdfSrc = new Blob([bytes], { type: 'application/pdf' });
          console.log("success")
          })        
        })
      .catch(error => {
        console.error('Failed to get PDF bytes:', error);
      });
    }

This is currently what I've started, moving forward I want the textfield to move in the annotationLayer of the pdf-viewer. Thanks

[stephanrauh]

Before answering your question, allow me a side remark: if you're using the async keyword, also use await. It'll reward you with linear code even newbies can read. Something like this:

async addTextField() {
  try {
    const existingPdfBytes = await this.getPdfBytesFromStaticFile(this.pdfSrc);
    const doc = await PDFDocument.load(existingPdfBytes);
    
    const page = doc.getPages()[0];
    const nameField = doc.getForm().createTextField('nameField');
    nameField.setText('Enter your name');
    nameField.addToPage(page, { x: 50, y: 700, width: 200, height: 20 });
    
    const modifiedPdfBytes = await doc.save();
    const bytes = new Uint8Array(modifiedPdfBytes);
    this.pdfSrc = new Blob([bytes], { type: 'application/pdf' });
    
    console.log("success");
  } catch (error) {
    console.error('Failed to get PDF bytes:', error);
  }
}

Granted, in this particular case, your promises almost read like linear code, but in general, newbies (and me) have a hard time wrapping their head around the callbacks.

[stephanrauh]

I believe you're close. Your code should work. Possible issues are:

• Maybe the <input> field is rendered, but it's off-screen. The PDF coordinate system is a bit peculiar. Try y: 200 instead of y: 700 and scan the DOM for your <input> field.
• Maybe your code doesn't trigger re-rendering. Here's how to force rendering:

// Force refresh by nullifying first
this.pdfSrc = null;
setTimeout(() => {
  this.pdfSrc = new Blob([bytes], { type: 'application/pdf' });
}, 0);

If you're using zone-less Angular, using the ChangeDetectorRef might be the better solution.

[perljuls]

Actually it was already working before but thanks for your suggestion about nullifying it first now it renders immediately. I'm sorry I didn't rely my problem effectively. Let me reiterate again, I was able to add a form field (created using pdf-lib) in your pdf-viewer however, I can't manipulate these fields in the annotation layer of the pdf. Is it possible to have them behave just like text or image annotation where I can move and resize them?

[stephanrauh]

Keep me in the loop. I believe the feature is popular, so if you want to donate the source code, I could add it either to the showcase or even to the library itself.

[perljuls]

I'm not sure if I'm doing this right, maybe not but is this the way I can access the page's canvas without switching to the annotation layer? but I'm having an error when I use this method

 async onPagesLoaded(event){
    const currentPageIndex:number = this.pdfViewerService.currentPageIndex();
    const pageCanvas = **await this.pdfViewerService.getPageAsCanvas(currentPageIndex, {scale: 1})**
    if(pageCanvas){
      const ctx = pageCanvas.getContext('2d')!;
      ctx.strokeStyle = 'red';
      ctx.lineWidth = 3;
      ctx.strokeRect(10, 10, 50, 50); // Example: Draw a rectangle
    }  
  }

[stephanrauh]

Probably that's a timing issue. You have to wait until the page has been rendered. Listen to the (onPageRendered) event. Note that there's an event for each page, so you have to check for the page number of the event. Also note that pages are re-rendered when rotating, zooming or resizing the window.

[perljuls]

Hi its me again, I ended up creating a widgetsLayer for the form fields however I'm having a bit of a problem switching between layers coz I also need to have the upload image ( i use the pdf-stamp-editor) for this. My problem is if I already uploaded an image, I can't select the fields I added and vice versa. Now, I'm thinking of using the annotationEditorLayer instead of widgetsLayer but I can't use appendChild on annotationEditorLayer (since its disabled) without having to switch modes.

var annotationEditorLayer = pdfPage.annotationEditorLayer.div; ---- null this.renderer.removeClass(annotationEditorLayer, "disabled");

Is there a way I can implement another editor mode like (Form mode) onto the AnnotationsEditorLayer? so they can still interact with each other. Thanks.

[stephanrauh]

Good question. There's an (annotationLayerRendered) event, and it's fired after the (onPageRendered) event. What I do not know is whether the (annotationLayerRendered) event is always fired. I doubt so: if a page doesn't have an annotation, it doesn't need an annotation layer. So pdfPage.annotationEditorLayer.div might always be null on some pages.

In any case, pdfPage.annotationEditorLayer.div is null until the (annotationLayerRendered) event fires.