pdf-lib

pdf-lib copied to clipboard

What were you trying to do?

I have a PDF test_form.pdf. Filling it with Acrobat properly sets the font to the field's associated font. Filling it with PDF-lib reverts to a default font (probably Helvetica).

How did you attempt to do it?

const pdfDoc = await PDFDocument.load(formPdfBytes);
const form = pdfDoc.getForm();

form.getTextField('Nom du client').setText('John Doe');

const pdfBytes = await pdfDoc.save();

What actually happened?

test_form_pdf_lib.pdf

What did you expect to happen?

Here's what Acrobat renders:

test_form_acrobat.pdf

How can we reproduce the issue?

In a browser:

const formPdfBytes = await fetch('assets/pdf/test_form.pdf')
  .then((res) => res.arrayBuffer())
  .then((res) => new Uint8Array(res));
const pdfDoc = await PDFDocument.load(formPdfBytes);
const form = pdfDoc.getForm();

form.getTextField('Nom du client').setText('John Doe');

const pdfBytes = await pdfDoc.save();
this.iframePdfDocUrl = URL.createObjectURL(
  new Blob([new Uint8Array(pdfBytes)], { type: 'application/pdf' })
);

var link = document.createElement('a');
link.href = this.iframePdfDocUrl;
var fileName = 'test_form_pdf_lib.pdf';
link.download = fileName;
link.click();

Version

1.17.1

What environment are you running pdf-lib in?

Browser

Checklist

• [X] My report includes a Short, Self Contained, Correct (Compilable) Example.
• [X] I have attached all PDFs, images, and other files needed to run my SSCCE.

Additional Notes

No response

I think you should embed the font in the pdf like this:

const fontkit = require('@pdf-lib/fontkit')

const pdfDoc = await PDFDocument.load(formPdfBytes);
pdfDoc.registerFontkit(fontkit);
const customFont = await pdfDoc.embedFont(customFontBytes)

const form = pdfDoc.getForm();
form.getTextField('Nom du client').setText('John Doe');

form.updateFieldAppearances(customFont)

const pdfBytes = await pdfDoc.save();

Hi @michelolvera , thanks for your response! Sadly the font comes already embedded in the PDF and I don't have a direct access to it. However I managed to do a POC on the lib and get the customFontBytes from the Font entry of the PDF. I plan on opening a Pull Request with this change to at least be able to get the font for a given text field

I have to say that the code was a joy to dive into, it's well-architected and quite clear. It efficiently abstracts the PDF standard and makes the links to the standard quite straightforward once you get the logic 👍

I've encountered this as well. Have been updating a codebase to replace node-pdftk with pdf-lib for filling forms. With the former, we would just specify the text for the field and it would render in the PDF using the font (Scriptina) specified for the field. The Scriptina font is embedded in to the document, so a person could open the document in acrobat as well and fill out the form and the desired font would be used. This hasn't been the behavior with pdf-lib and I'm not sure if it expected to behave like that?

In my case, I did have the font available and had tried the approach @michelolvera mentioned. The text did render in the font that was expected, but it wasn't obeying the automatic font size that is also defined for the field.

+1. Would it be possible to address this so that the form is filled with the font that's already embedded in the PDF and assigned to the field?

Hi @flavianh, can you share your POC to get the customFontBytes from the Font entry of the PDF

I want to do the same

thank