How to Copy and Apply Annotations to Pages in JavaScript PDF Viewer?

Copying and Applying Annotations to All Pages in a PDF Viewer

Description:

This article explains how to copy and apply annotations to all pages in a JavaScript PDF Viewer.

Solution:

To apply an annotation to all pages in a PDF document, copy the annotation from the first page. When saving the PDF, the annotation will automatically be applied to every page in the document.

Code Snippets:

Client-Side Code Block:

index.html:

    <button id="savePdf">SavePDF</button>
    <div id="pdfViewer" style="height:640px; width:100%;">

index.js:

    document.getElementById('savePdf').addEventListener('click', ()=> {
        viewer.serverActionSettings.download = "SavePdf";
        viewer.download();
        viewer.serverActionSettings.download = "Download";
    });

Server-Side Code Block:

PdfViewerController.cs:

       public IActionResult SavePdf([FromBody] Dictionary<string, string> jsonObject)
       {
           PdfRenderer pdfviewer = new PdfRenderer(_cache);
           string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
           string convertedBase = documentBase.Substring(documentBase.LastIndexOf(',') + 1);
           byte[] bytes = Convert.FromBase64String(convertedBase);
           PdfLoadedDocument loadedDocument = new PdfLoadedDocument(bytes);
           PdfAnnotation StampAdded = null;
           int i = 0;
           foreach (PdfLoadedPage loadedPage in loadedDocument.Pages)
           {
               if (i == 0)
               {
                   foreach (PdfLoadedAnnotation annotation in loadedPage.Annotations)
                   {
                       if (annotation is PdfLoadedRubberStampAnnotation)
                       {
                           StampAdded = annotation as PdfLoadedRubberStampAnnotation;
                       }
                   }
                   i++;
               }
               else
               {
                   if (StampAdded != null)
                   {
                       loadedPage.Annotations.Add(StampAdded);
                   }
               }
           }
           MemoryStream stream = new MemoryStream();
           loadedDocument.Save(stream);
           stream.Position = 0;

           loadedDocument.Close(true);
           string updatedDocumentBase = Convert.ToBase64String(stream.ToArray());
           return Content("data:application/pdf;base64," + updatedDocumentBase);
       }

Sample Link:

You can find the full sample in our GitHub repository.

Demo link: Feature Demo

Implementation Steps:

1. Run the Server sample.
2. Run the Client sample.
3. Add the stamp annotation on the first page.
4. Clicking the SavePDF button will save the document with the stamp annotation applied to all pages.

Conclusion:

We hope you enjoyed learning about how to copy and apply annotations to pages in the JavaScript PDF Viewer.

You can refer to the JavaScript PDF feature tour page to learn about its other groundbreaking feature representations and documentation, as well as how to quickly get started with configuration specifications.

You can also explore our JavaScript PDF Viewer example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!