I’m working on an Angular project where I need to generate certificates for users based on pre-existing PDF templates. The PDFs contain placeholders like ##First Name##, ##Last Name##, ##Score##, etc., which need to be programmatically replaced with actual user data retrieved from the backend.

Currently, I retrieve the PDF as a Blob from the backend and can successfully display it using ng2-pdf-viewer. However, I need a solution to replace these placeholders with dynamic user data while preserving the original PDF formatting, including text alignment, fonts, and colors.

I’ve tried using pdf-lib, which allows me to draw new text over the existing PDF content, but this approach doesn’t actually replace the placeholder text, it just prints the new text on top, which isn’t ideal.

How can I programmatically replace text within a PDF while preserving the original formatting in Angular? I’m looking to maintain the integrity of the PDF’s design, ensuring that placeholders are replaced with dynamic data without altering the existing layout, fonts, or colors.