Вот решение.
Код DataTable
HTML выглядит следующим образом:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Export to PDF</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<!-- buttons -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
Build a custom local version of the vfs_fonts.js file, containing whatever fonts you need. The
structure of the file is this:
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
"arial.ttf": "AAEAA...MYXRu",
"another_one.ttf": "XXXX...XXXX"
};
Replace the "AAEAA...MYXRu" with the base64-encoded string of your font file.
You can use this site to generate the string: https://dataurl.sveinbjorn.org/#dataurlmaker
-->
<script src="vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display nowrap dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adélaïde Nixon</td>
<td><font face="verdana">الفبای فارسی ۱۲۳۴</font></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Data</th>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [{
extend: 'pdf',
customize: function ( doc ) {
processDoc(doc);
}
}]
});
});
function processDoc(doc) {
//
// https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/
//
// Update pdfmake's global font list, using the fonts available in
// the customized vfs_fonts.js file (do NOT remove the Roboto default):
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-MediumItalic.ttf'
},
arial: {
normal: 'arial.ttf',
bold: 'arial.ttf',
italics: 'arial.ttf',
bolditalics: 'arial.ttf'
}
};
// modify the PDF to use a different default font:
doc.defaultStyle.font = "arial";
var i = 1;
}
</script>
</body>
Таблица данных как веб-страница
Приведенное выше HTML создает следующую веб-страницу:
Файл PDF
При нажатии кнопки «Сохранить» как PDF », документ PDF выглядит следующим образом:
Как реализовать
Как объяснено здесь , pdfMake по умолчанию использует шрифт Roboto. Этот шрифт не поддерживает персидские символы / скрипт. Чтобы обойти это, я изменил шрифт по умолчанию на Arial, который обеспечивает поддержку персидских символов / скрипта.
Чтобы внести это изменение, я предпринял следующие шаги:
Я сгенерировал новый vfs_fonts.js файл, содержащий содержимое файла arial TTF. Я также ссылаюсь на этот новый локальный файл vfs_fonts.js вместо версии Cloudflare.
Файл vfs_fonts.js имеет следующую структуру:
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
"arial.ttf": "AAEAA...MYXRu",
"another_one.ttf": "XXXX...XXXX"
};
Каждая из строк "AAEAA...MYXRu является представлением соответствующего шрифта в кодировке base64.
Чтобы сгенерировать строку для вашего файла TTF, вы можете использовать утилиты, предоставляемые pdfmake (см. ниже), или использовать любой кодировщик base64. Одним из примеров является dataurlmaker .
Вставьте (очень длинную) строку, сгенерированную dataurlmaker, в ваш файл vfs_fonts.js. НЕ включайте никакую преамбулу, предоставленную dataurlmaker («data: application / octet-stream; base64,»). Включите только саму строку base64.
В качестве альтернативы ...
Используя инструменты, предоставляемые pdfmake:
Чтобы создать этот новый файл vfs_fonts.js, я следовал соответствующим инструкциям на этой странице .
(a) У меня уже установлено npm.
(b) Я запускаю npm install pdfmake
(c) Я перешел в каталог установки pdfmake:
C:\Users\<myUserID>\node_modules\pdfmake\
(d) Я создал подкаталог examples/fonts в своем каталоге pdfMake.
(e) Я скопировал свой Windows arial.ttf файл в этот новый каталог fonts.
(f) Я запустил npm install (из каталога pdfMake), чтобы убедиться, что все необходимые компоненты были установлены.
(g) Я установил gulp, используя npm install gulp --global
(h) Я запустил gulp buildFonts, чтобы создать новый build/vfs_fonts.js.
(i) Я включил этот новый файл build/vfs_fonts.js в свою веб-страницу код (как показано выше).
После этих шагов мне удалось создать PDF-файл с использованием шрифта Arial.