jsPDF-Autotable Print Special Characters & Fonts in Table

After the release of version 1.4.0, the jsPDF finally supports encoding diacritics characters, but in a very strange way, in my opinion.

Find the font which contains the characters that you need. Let’s say it will be a Calibri.
Go to C:\Windows\Fonts\Calibri and copy a .ttf font file to Desktop.
Go to jsPDF FontConverter and select copied font file. Click on the Create button.
You should get a JavaScript file with content like this:

import { jsPDF } from "jspdf"
var font = 'AAEAAAAWAQQAAB...==';
var callAddFont = function () {
  this.addFileToVFS('calibri-normal.ttf', font);
  this.addFont('calibri-normal.ttf', 'calibri', 'normal');
};
jsPDF.API.events.push(['addFonts', callAddFont]);

The second string in this.addFont('calibri-normal.ttf', 'calibri', 'normal'); will be the name of your font. Remember it.

Add a downloaded javascript file to your project and import it: import '../utils/calibri-normal';
Go to a place where you initialize a jsPDF object and set your font up:

<span class="hljs-keyword">const</span> doc = <span class="hljs-keyword">new</span> <span class="hljs-title function_">jsPDF</span>(<span class="hljs-string">'p'</span>, <span class="hljs-string">'pt'</span>, <span class="hljs-string">'a4'</span>);
doc.<span class="hljs-title function_">setFont</span>(<span class="hljs-string">"calibri"</span>);    <span class="hljs-comment">// <-- place here your font name, which you remeber before</span>
<span class="hljs-comment">//...</span>
doc.<span class="hljs-title function_">save</span>(<span class="hljs-string">'file001.pdf'</span>);

If you use jsPDF Autotable add new font to autotable settings too:

doc.<span class="hljs-title function_">autoTable</span>({
    <span class="hljs-attr">head</span>: [[<span class="hljs-string">'Column1'</span>, <span class="hljs-string">'Column2'</span>, <span class="hljs-string">'Column3'</span>]],
    <span class="hljs-attr">body</span>: someDataRows,
    <span class="hljs-attr">styles</span>: {
      <span class="hljs-attr">font</span>: <span class="hljs-string">'calibri'</span>,    <span class="hljs-comment">// <-- place name of your font here</span>
      <span class="hljs-attr">fontStyle</span>: <span class="hljs-string">'normal'</span>,
    },
    <span class="hljs-attr">margin</span>: { <span class="hljs-attr">bottom</span>: <span class="hljs-number">60</span> }
});

Furqan

Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.