在数据表pdfmaker扩展名中更改字体 [英] Changing font in datatables pdfmaker extension
问题描述
我整整一天都用Google搜索，并搜索StackOverflow来找到一种解决方案来更改dataTables的pdf导出中的字体.但是，我没有遇到任何解决方案.当我将表格导出为pdf脚本时，字体是无法识别的.只需看下面的图片.它显示了我的表格中的两列.
I have googled enough for a whole one day, and searched StackOverflow to find a solution for changing the font in pdf exports of dataTables. However, I didn't run into a solution. When I export the table into pdf script fonts are something undecipherable. Just look at the picture below. It shows two columns from my table.
dataTables论坛和pdfMaker文档均含糊不清.谁能帮我解决这个问题.我需要为数据表的pdfMaker扩展名指定一种字体. 以下是vfs_fonts.js的外观:
Both dataTables forum and pdfMaker documentations are vague. Can anyone please help me out of the problem. I need to specify a font for pdfMaker extension of datatables. The following is what vfs_fonts.js looks like:
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
pdfMake.fonts = {
Vazir: {
normal: 'Vazir-FD.ttf',
bold: 'Vazir-FD.ttf',
italics: 'Vazir-FD.ttf',
bolditalics: 'Vazir-FD.ttf'
}
};
}
以下也是我的数据表的按钮块:
The following is also my buttons block of my datatables:
buttons: [
{ extend: 'pdfHtml5', exportOptions:
{ columns: [0, 1, 2, 3, 4, 5, 6] },
customize: function (doc) {
doc.defaultStyle.font = Vazir},
},
]
请注意，在上面的代码块中，当我添加"customize"块时，pdfMaker按钮将不会准备任何pdf报告.没有它，它就可以工作，但是字体是无法识别的. 提前致谢.
Note that in the above block of code, when I add 'customize' block, the pdfMaker button won't prepare any pdf reports; without it, it works, however, the fonts are undecipherable. Thanks in advance.
推荐答案
这是一个解决方案.
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产生以下网页:
The DataTable as a Web Page
The above HTML produces the following web page:
当您单击另存为PDF"按钮时，PDF文档如下所示:
When you click on the "Save as PDF" button, the PDF document looks like this:
如此处所述，pdfMake使用Roboto字体默认情况下.该字体不支持波斯字符/脚本.要解决此问题，我将默认字体更改为Arial，它确实提供了对波斯字符/脚本的支持.
As explained here, pdfMake uses the Roboto font by default. This font does not support Persian characters/script. To work around this, I changed the default font to Arial, which does provide support for Persian characters/script.
要进行此更改，我采取了以下步骤:
To make this change I took the following steps:
我生成了一个新的vfs_fonts.js文件，其中包含arial TTF文件的内容.我还引用了这个新的本地vfs_fonts.js文件，而不是Cloudflare版本.
I generated a new vfs_fonts.js file, containing the contents of an arial TTF file. I also refer to this new local vfs_fonts.js file, instead of the Cloudflare version.
vfs_fonts.js文件具有以下结构:
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
"arial.ttf": "AAEAA...MYXRu",
"another_one.ttf": "XXXX...XXXX"
};
每个"AAEAA...MYXRu字符串都是相关字体文件的base64编码表示形式.
Each of the "AAEAA...MYXRu strings is the base64-encoded representation of the related font file.
要为您的TTF文件生成字符串，可以使用pdfmake提供的实用程序(请参见下文)，也可以使用任何base64编码器.一个示例是 dataurlmaker .
To generate the string for your TTF file, you can use the utilities provided by pdfmake (see below), or you can use any base64 encoder. One example is dataurlmaker.
将dataurlmaker生成的(很长)字符串粘贴到您的vfs_fonts.js文件中.不要包含dataurlmaker提供的任何前同步码("data:application/octet-stream; base64").仅包括base64字符串本身.
Paste the (very long) string generated by dataurlmaker into your vfs_fonts.js file. Do NOT include any preamble provided by dataurlmaker ("data:application/octet-stream;base64,"). Include only the base64 string itself.
或者...
使用pdfmake提供的工具:
Using the tools provided by pdfmake:
To generate this new vfs_fonts.js file, I followed the relevant instructions on this page.
(a)我已经安装了npm.
(a) I already had npm installed.
(b)我跑了npm install pdfmake
(c)我更改为pdfmake安装目录:
(c) I changed to the pdfmake installation directory:
C:\Users\<myUserID>\node_modules\pdfmake\
(d)我在pdfMake目录中创建了examples/fonts子目录.
(d) I created the examples/fonts subdirectory in my pdfMake directory.
(e)我将Windows arial.ttf文件复制到了这个新的fonts目录中.
(e) I copied my Windows arial.ttf file into this new fonts directory.
(f)我运行了npm install(从pdfMake目录中)以确保已安装所有必备模块.
(f) I ran npm install (from the pdfMake directory) to ensure all prerequisites modules were installed.
(g)我使用npm install gulp --global
(h)我运行gulp buildFonts来创建一个新的build/vfs_fonts.js.
(h) I ran gulp buildFonts to create a new build/vfs_fonts.js.
(i)我在网页代码中包含了这个新的build/vfs_fonts.js文件(如上所示).
(i) I included this new build/vfs_fonts.js file in my web page code (as shown above).
执行这些步骤后，我能够使用Arial字体生成PDF.
After taking these steps, I was able to generate a PDF using the Arial font.
这篇关于在数据表pdfmaker扩展名中更改字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
