font file not found in virtual file system - datatables

Question

I'm using Datatable js to manage my tables but facing a issue with encode Arabic Words when try export a pdf file,
so I'm trying to change the default font in pdfMake
so I did that
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script>
pdfMake.fonts = {
Arial: {
normal: 'Arial.ttf',
bold: 'Arial.ttf',
italics: 'Arial.ttf',
bolditalics: 'Arial.ttf'
}
};
var buttons = new $.fn.dataTable.Buttons(datatable, {
buttons: [{
extend: 'copyHtml5',
title: documentTitle
},
{
extend: 'excelHtml5',
title: documentTitle
},
{
extend: 'csvHtml5',
title: documentTitle
},
{
extend: 'pdfHtml5',
title: documentTitle,
customize: function(doc) {
doc.defaultStyle.font = 'Arial';
},
}
]
}).container().appendTo($('#report_views_export'));
</script>
but I'm getting that message in console Uncaught (in promise) File 'Arial.ttf' not found in virtual file system

Answer 1

You need to add the fonts in file vfs_fonts.js. To do that you must encode every font file to base 64 format and putting the base 64 string in the file vfs_fonts.js.
File vfs_fonts.js will be like
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
"arial.ttf": "AAEAAAAXAQAABABwRFNJRyQ9+ecAB..........",
"arialbd.ttf":"AAEAAAAXAQAABABwRFNJR8zIlFoA..........",
"ariali.ttf":"AAEAAAAXAQAABABwRFNJRy1JDhMAC..........",
"arialbi.ttf":"AAEAAAAYAQAABACARFNJRxk7cD4A.........."
};