Render to canvas with filled form fields

[jpetso]

Configuration:

• Web browser and its version: node.js 11.10.0
• Operating system and its version: Arch Linux ca. 2019-02-08
• PDF.js version: pdfjs-dist 2.0.943
• Is a browser extension: No

I looked into using pdf.js for writing a program that takes a PDF with empty form fields, fills in the fields with values from a CSV file, and prints it into another PDF file [*] with now-unchangeable fields. (Not attaching the PDF as it's a template for tax receipts.)

[*] The Node canvas based on cairo, as demonstrated in your pdf2png example, crashes on me when I try to switch it to a PDF canvas, but that's a different issue and may eventually be solvable somehow.

My current hacky bash script is using pdftk, approximately like this (I'd like to replace it so I don't have to redistribute pdftk):

FDF="
%FDF-1.2
%aaIO
1 0 obj
<< /FDF << /Fields [
  << /T (TR_NUMBER)  /V ($TR_NUMBER) >>
  << /T (DATE_ISSUED)  /V ($DATE_ISSUED) >>
  << /T (DATE)  /V ($DATE) >>
  << /T (AMOUNT)  /V ($AMOUNT) >>
  << /T (NAME)  /V ($NAME) >>
  << /T (ADDRESS)  /V ($ADDRESS) >>
  << /T (CITY)  /V ($CITY) >>
  << /T (PROVINCE)  /V ($PROVINCE) >>
  << /T (POSTAL_CODE) /V ($POSTAL_CODE) >> ] >>
>>
endobj
trailer << /Root 1 0 R >>
%%EOF
"
echo "$FDF" | pdftk "$RECEIPT_PDF" fill_form - output "$NAME.pdf" flatten

pdf.js gives me page.getAnnotations() which shows me a nice list of all my fields:

   [ { annotationFlags: 4,
       borderStyle: [Object],
       color: [Uint8ClampedArray],
       hasAppearance: true,
       id: '6R',
       rect: [Array],
       subtype: 'Widget',
       annotationType: 20,
       fieldName: 'TR_NUMBER',
       fieldValue: '',
       alternativeText: '',
       defaultAppearance: '0.19215 0.21176 0.23137 rg /F3 10 Tf',
       fieldType: 'Tx',
       fieldFlags: 0,
       readOnly: false,
       textAlignment: null,
       maxLen: null,
       multiLine: false,
       comb: false },
     { annotationFlags: 4,
       borderStyle: [Object],
       color: [Uint8ClampedArray],
       hasAppearance: false,
       id: '11R',
       rect: [Array],
       subtype: 'Widget',
       annotationType: 20,
       fieldName: 'NAME',
       fieldValue: '',
       alternativeText: '',
       defaultAppearance: '0.19215 0.21176 0.23137 rg /F3 12 Tf',
       fieldType: 'Tx',
       fieldFlags: 0,
       readOnly: false,
       textAlignment: null,
       maxLen: null,
       multiLine: false,
       comb: false },
    ...etc... ]

However, I can't find functionality to programmatically set the fieldValue like with the mentioned FDF - after loading, before printing - so that the rendered canvas primitives would include the filled-in text. I saw that annotation layers are a thing, but that appears to be based on HTML divs and may thus open a whole other can of worms.

Is my use case something that's in scope for pdf.js, and what's missing to make it happen?

[timvandermeij]

Closing since this is a duplicate of #7613. Basically, we are looking into adding support for this, but it doesn't exist yet and it's also not a high priority since PDF.js is mainly a reader.