使用DataTables导出PDF遇阿拉伯语编码问题，配置pdfMake字体报错

报错原因 #

你遇到的Uncaught (in promise) File 'Arial.ttf' not found in virtual file system错误，是因为你引入的vfs_fonts.js虚拟文件系统中，并没有内置Arial.ttf这个字体文件，默认仅包含Roboto系列字体文件。

解决方案 #

方案一：使用pdfMake内置字体（快速解决报错，仅临时可用） #

如果只是想先消除报错，可直接使用vfs_fonts.js中已有的Roboto字体：

pdfMake.fonts = {
    Roboto: {
        normal: 'Roboto-Regular.ttf',
        bold: 'Roboto-Bold.ttf',
        italics: 'Roboto-Italic.ttf',
        bolditalics: 'Roboto-BoldItalic.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 = 'Roboto';
            },
        }
    ]
}).container().appendTo($('#report_views_export'));

方案二：配置支持阿拉伯语的自定义字体（彻底解决编码问题） #

要完美显示阿拉伯语，需使用支持阿拉伯语的字体（如Noto Naskh Arabic），并将字体文件添加到pdfMake的虚拟文件系统中：

1. 准备字体文件
   下载支持阿拉伯语的字体文件，比如NotoNaskhArabic-Regular.ttf、NotoNaskhArabic-Bold.ttf等。

2. 生成包含自定义字体的VFS文件
   使用pdfMake的VFS生成工具，将下载的字体文件转换为虚拟文件系统代码，替换原有的vfs_fonts.js内容（或追加到其中）。

3. 配置pdfMake字体及DataTables导出设置

   pdfMake.fonts = {
       NotoArabic: {
           normal: 'NotoNaskhArabic-Regular.ttf',
           bold: 'NotoNaskhArabic-Bold.ttf',
           italics: 'NotoNaskhArabic-Regular.ttf', // 无斜体字体时用常规字体替代
           bolditalics: 'NotoNaskhArabic-Bold.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 = 'NotoArabic';
                   doc.defaultStyle.direction = 'rtl'; // 阿拉伯语需设置为从右到左布局
                   doc.styles.title.direction = 'rtl'; // 标题也需适配RTL布局
               },
           }
       ]
   }).container().appendTo($('#report_views_export'));
   

关键注意点 #

• 阿拉伯语属于RTL（从右到左）语言，必须设置direction: 'rtl'，否则文字布局会混乱。
• 自定义字体文件名需与VFS中存储的文件名完全一致，大小写也需匹配。

内容的提问来源于stack exchange，提问作者Mahmoud Niypoo