Programatically add images, use custom font and icons

[hagealex]

Hello,

I'm evaluation this PDF Viewer for my Angular application and I'm very happy so far. But I have some question that I can't solve for now:

1. Is it possible to use a custom font for the filled fields? I have a fillable PDF form and in my case I will have to use a specific font for the filled field values. I need this only for the filled form fields, not for the whole PDF. My client has a strict requirement regarding the font-family that is used for filling the form inputs.

2. Is it possible to change the "checked icon" for checkboxes?

3.Is it possible to progamatically add images to the PDF? My client has requirements regarding 2D Barcodes that need to be places on the PDF. I know that it is possible to manually add images on the PDF. But in my case I would generate a 2D Barcode as image during rendering and will have to place it on the PDF directly.

Kind regards and in hope for some feedback :)

[stephanrauh]

The forms are simple HTML above the PDF, which is rendered as a canvas. You can use your own custom font by applying CSS. Just analyze the DOM with your browser's tools to find the form fields and to find our which CSS selectors you need.

The "checked icon" is - probably - also CSS. At the moment, I can't tell you how it works, but when you play around with the settings in the DOM inspector you'll see quickly you can modify the icon with CSS. Here's a tutorial showing you how to do that: https://boolie.org/css-checkbox-styling/ (use Google translate or another translation tool if you don't speak German - it should do the trick).

As for the programmatic API to add images: yes, that's possible. At least that's what the guy who opened #1858 told me. Unfortunately, they didn't tell me how they managed to do so. I'm going to add the programmatic API soon, but I can't tell you when "soon" is. Maybe I should simply ask you: when do you need it?

[hagealex]

Hello @stephanrauh . Thank you for your answer! According to your hints I was able to use my own font for the input fields:

::ng-deep input[id*="pdfjs_internal"] {
  font-family: "Courier New";
}

But when I save or print the PDF it seems the default font is used and not the one I set up via CSS.

I also tried the @media print rule but it doesn't seem to work:

@media print {
  ::ng-deep input[id*="pdfjs_internal"] {
    font-family: "Courier New";
  }
}

I tried various approaches within the print query. None of them worked.

Does the PDF ignore custom CSS rules for the print view?

[stephanrauh]

@calixteman @timvandermeij Is it possible to use a custom font for forms when printing a PDF file with pdf.js?

[stephanrauh]

@hagealex After reading the answer of @calixteman, I wonder why you want the PDF viewer to modify the font. I don't mind modifying stuff on the annotation layer, because that's not really part of the PDF, but the idea of PDF is having a file format you can trust. Using a different font is a small step toward undermining this trust, so I don't want to do it. On the other hand, you already have the option to modify the font. You can define the font when you create the PDF file. So all you have to do is selecting - and possibly embedding - your custom font when creating the PDF file.

If you've already got the PDF file and can't ask the author to change it, you can probably still use a library like iText to read the PDF file, modify the font settings, and write the new version to disk.

[hagealex]

@stephanrauh Thank you for the provided information!

The reason I want to modify the font is: My client has strict requirements regarding that. I have to provide an application where customers can fill out the form and the client expects the printed or downloaded version to have a specific font for the form fields.

[hagealex]

@stephanrauh Also thank you for the hint regarding modifying the PDF itself. I tried this approach and it works as expected! So no need for any custom logic in pdf.js !

[calixteman]

In general we try to use the font which is used in the DA entry and normally defined in the Resources entry.
When there's an encoding issue, for example when you try to add a char which isn't in the font, we fallback on sans-serif (or monospace):
https://github.com/mozilla/pdf.js/blob/3f0b3b15def5a8eb40cab518da2002c9377252fe/src/core/annotation.js#L2278-L2288
So if you maintain of fork of pdf.js, then you can hack in this area to do what you want, if you use pdf.js as is, then it's unlikely we'll accept a patch for such a feature (except if you can convince us that it'd be useful to have it in Firefox itself).