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.

  1. Find the font which contains the characters that you need. Let’s say it will be a Calibri.
  2. Go to C:\Windows\Fonts\Calibri and copy a .ttf font file to Desktop.
  3. Go to jsPDF FontConverter and select copied font file. Click on the Create button.
  4. 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.

  1. Add a downloaded javascript file to your project and import it: import '../utils/calibri-normal';
  2. 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>);
  1. 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> }
});

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.