PDFTron : How to add an input field

Question

I try to add an input field using PDFTron and nothing appear in the PDF,

I followed this doc : https://www.pdftron.com/documentation/samples/js/InteractiveFormsTest

 (() => {
    window.addEventListener('documentLoaded', async () => {
       await PDFNet.initialize();
       const doc = readerControl.docViewer.getDocument();
       const pdfDoc = await doc.getPDFDoc();
       await pdfDoc.requirePage(1);
       await PDFNet.runWithCleanup(async () => await main(pdfDoc));
       readerControl.docViewer.refreshAll();
       readerControl.docViewer.updateView();
  });

  async function main(pdfDoc) {
       ...
       const pageRect = await PDFNet.Rect.init(0, 0, 612, 794);
       let page = await pdfDoc.pageCreate(pageRect);
       const empFirstName = await pdfDoc.fieldCreateFromStrings('test', PDFNet.Field.Type.e_text, 'John', 'fg');
      const annot1 = await PDFNet.WidgetAnnot.create(pdfDoc, await PDFNet.Rect.init(50, 550, 350, 600), empFirstName);
      page.annotPushBack(annot1);


      pdfDoc.pagePushBack(page);
      pdfDoc.refreshFieldAppearances();
      ...
 };

Result : Nothing appear on the PDF

Any idea?

Answer 1

I have looked at your code and made some modifications - Im not sure what was truncated, but perhaps you were missing a few steps.

Let me know if this clarifies the process to add a field programatically, and if you have further questions.

window.addEventListener('documentLoaded', async() => {
const docViewer = readerControl.docViewer;
const annotManager = docViewer.getAnnotationManager();
await PDFNet.initialize();
const doc = readerControl.docViewer.getDocument();
const pdfDoc = await doc.getPDFDoc();
await pdfDoc.requirePage(1);
await PDFNet.runWithCleanup(async () => {
  const document = docViewer.getDocument();
  const pdfDoc = await document.getPDFDoc();

  const empFirstName = await pdfDoc.fieldCreateFromStrings('test', PDFNet.Field.Type.e_text, 'John', 'fg');
  const annot1 = await PDFNet.WidgetAnnot.create(pdfDoc, await PDFNet.Rect.init(50, 550, 350, 600), empFirstName);

  const rotation = docViewer.getCompleteRotation(1) * 90;
  annot1.setRotation(rotation);



  // draw the annotation the viewer
  const page = await pdfDoc.getPage(1);
  await page.annotPushBack(annot1);
  await pdfDoc.refreshFieldAppearances();

  // import newly created form fields
  const fdfDoc = await pdfDoc.fdfExtract(PDFNet.PDFDoc.ExtractFlag.e_both);
  const xfdf = await fdfDoc.saveAsXFDFAsString();

  await annotManager.importAnnotations(xfdf);

  // refresh viewer
  docViewer.refreshAll();
  docViewer.updateView();
  document.refreshTextData();
});

});