Replacing text & images in PDFs using Apryse's Web SDK

Make sure you have Full API enabled in WebViewer.

WebViewer({
  fullAPI: true,
  // other constructor options
}, viewerElement).then(instance => {
  const { documentViewer, PDFNet } = instance.Core;

  document.getElementById('myBtn').addEventListener('click', async () => {
    await PDFNet.initialize();
    const doc = await documentViewer.getDocument().getPDFDoc();

    // Run PDFNet methods with memory management
    await PDFNet.runWithCleanup(async () => {

      // lock the document before a write operation
      // runWithCleanup will auto unlock when complete
      doc.lock(); 

      const replacer = await PDFNet.ContentReplacer.create();
      const page = await doc.getPage(1);

      // replace an image on the page
      const target_region = await page.getMediaBox();
      const img = await PDFNet.Image.createFromURL(doc, imagename);
      await replacer.addImage(target_region, await img.getSDFObj());

      // replace a text placeholder
      await replacer.addString('NAME', 'John Smith');

      // replace text in a given region
      const text = "hello world";
      await replacer.addText(target_region, text);
      await replacer.process(page);
    });

    // clear the cache (rendered) data with the newly updated document
    documentViewer.refreshAll();

    // Update viewer to render with the new document
    documentViewer.updateView();

    // Refresh searchable and selectable text data with the new document
    documentViewer.getDocument().refreshTextData();
  });
})