jsPDF UTF-8 Support
Hey devs, I assume you already know how to export a PDF document using the jsPDF library. If the answer is no, you can go and check my previous article. In this post, I will introduce a common issue about PDF files including UTF-8 characters and explain how to avoid it during a PDF export operation.
The following example shows a PDF output of a description and tags. We can see that the last 2 tags seem corrupted, and the reason is that they contain UTF-8 characters. Since the jsPDF library doesn’t support these characters automatically, we need to add a custom font family to be able to create the desired output.
After creating a new jsPDF instance, we can console log “getFontList” and “getFont” methods to see default fonts.
None of the above works for us as they don’t support UTF-8. You can go to google fonts and check different types of fonts to see which one of them has the required glyphs for you. In this demo, I will use Open Sans as it works perfectly fine for my texts.
You can also select your font, charsets, and font size here and download the files. I have chosen all charsets and regular font sizes for my project. Among the downloaded files, what we need is a TTF formatted file since we need to convert that file at “fontconverter” to a Javascript file.
After you choose your font TTF file to convert, you will find a base64 encoded string within that Javascript file. You can export that string or you can copy and store it somewhere else. I have copied that encoded string and stored it in a Typescript file to export easily.
export const OpenSansEncoded: string = 'AAEAAAASAQAABAAgR0RFRqOgoD8AAZxAAAABpkdQT1OT967xAAGd6AAAN4RHU1VCHQIfmgAB1WwAAAcwT1MvMpZAgywAAV2YAAAAYFNUQVRe+0M1AAHcnAAAAF5j……………'Then you can import that encoded string to use in your export method. The library itself has vFS which handles files. We need to execute 3 methods step by step. First, we add our base64 encoded string with the name of the file by calling the “addFileToVFS” function. Then we can add our custom font to the current PDF instance, and we can console log the “getFontList” to check if it has been added or not.
As we see our custom font added in the font list, we can call the “setFont” method to set our font as default. If you are planning to add texts by the jsPDF “text” method, you will see our desired UTF-8 characters are not corrupted anymore. If you try to use the jsPDF “html” method and the font you downloaded is your current project’s default font then still everything is good. However, if your project’s default font is different, then you will see nothing has changed. All you need to do is set your custom font as inline CSS to override your default font when exporting a PDF file.
The project’s default font is “Verdana” which doesn’t support UTF-8 charsets. In the example above, both divs include words with UTF-8 characters. The div with description id has inline Open Sans style to override Verdana but the div with tag id doesn’t. We can see that tags are still corrupted while the description is all good. As a result, if you encounter this kind of problem, you should override your font with inline CSS.
Thanks for reading and I hope you found out the answer. I would appreciate your feedback!
