javascript - 如何在jQuery数据表PDF导出中显示复选标记字符(How to display check mark character in jQuery datatables PDF export)

Question

I have the following table which uses the datatables plugin for pagination, sorting and exporting.

(我有下表，该表使用datatables插件进行分页，排序和导出。)

Everything works great except the check mark in my html is not exported with the pdf , yet it is with excel .

(一切工作正常，除了我的html的check mark未随pdf导出，而是与excel一起导出。)

I want to get this working because I am going to remove the checkbox element in favour of clicking the table cell and toggling whether the check mark is present.

(我想使此工作正常进行，因为我将删除checkbox元素，而希望单击表格单元格并切换是否显示check mark 。)

I really want to avoid using 'Y'/'N' as indicators in any part of the table/exports.

(我真的想避免在表/出口的任何部分使用'Y'/'N'作为指标。)

Has anyone come across this issue before or can offer any light, my instinct tells me it's something to do with the character encoding in PDF export library, but I don't want to go just go in and start editing library files because this issue (may)will be repeated if I ever need to upgrade the lib.

(有没有人遇到过这个问题或可以提供任何帮助，我的直觉告诉我，这与PDF导出库中的字符编码有关，但是我不想只是进入并开始编辑库文件，因为这个问题（如果我需要升级lib，可能会重复）。)

In addition, I'm not totally sure what to look for.

(另外，我不确定要寻找什么。)

HTML

(的HTML)

Excel

(电子表格)

PDF

(PDF格式)

  ask by Adam Copley translate from so

Answer 1

PROBLEM:(问题：)

jQuery's Datatables uses pdfmake library for its eporting in PDF.

(jQuery的Datatables使用pdfmake库将其导出为PDF。)

pdfmake uses only one font 'Roboto' as it's text font and as it so happens its char-set doesn't support the '?' symbol.

(pdfmake仅使用一种字体“ Roboto”作为其文本字体，因此它的字符集不支持“?”符号。)

You can have a look at all the characters 'Roboto' , pdfmake and subsequently Datatables supports here: https://www.fontspace.com/font-charmap/21071

(您可以在这里查看所有字符'Roboto'，pdfmake和随后的数据表支持： https ://www.fontspace.com/font-charmap/21071)

This information was found at: https://github.com/bpampuch/pdfmake/issues/1478

(该信息位于： https : //github.com/bpampuch/pdfmake/issues/1478)

SOLUTION:(解：)

You can change the font that Datatables uses when exporting to pdf using pdfmake to something that support the character symbol '?'

(您可以将使用pdfmake导出到pdf时Datatables使用的字体更改为支持字符符号“?”的字体)

1. create a new vfs_fonts.js file containing your font files

   (创建一个包含字体文件的新vfs_fonts.js文件)

   • Create the examples/fonts subdirectory in your pdfMake code directory, if it doesn't already exist.

     (如果尚不存在，请在pdfMake代码目录中创建examples / fonts子目录。)

   • Copy your fonts (and other files you wish to embed) into the examples/fonts subdirectory.

     (将您的字体（和您希望嵌入的其他文件）复制到examples / fonts子目录。)

   • Run npm install (from the pdfMake directory) to ensure all prerequisites modules are installed.

     (运行npm install（从pdfMake目录）以确保已安装所有必备模块。)

   • Run gulp buildFonts to create a new build/vfs_fonts.js (you can update gulpfile.js to change the base directory path or to add an alternative config for the buildFonts task).

     (运行gulp buildFonts创建一个新的build / vfs_fonts.js（您可以更新gulpfile.js来更改基本目录路径或为buildFonts任务添加替代配置）。)

   • Include your new build/vfs_fonts.js file in your code (in the same way you include pdfmake.js or pdfmake.min.js).

     (在代码中包含新的build / vfs_fonts.js文件（以与您包含pdfmake.js或pdfmake.min.js相同的方式）。)

   • The above buildFonts action embeds all files from examples/fonts (into a local key/value variable pdfMake.vfs) - not only fonts.

     (上面的buildFonts操作将示例/字体中的所有文件嵌入到本地键/值变量pdfMake.vfs中-不仅是字体。)

     Which means you could put images in there, run gulp buildFonts, and reference them by filename in your doc-definition object.

     (这意味着您可以将图像放入其中，运行gulp buildFonts，然后在您的doc-definition对象中按文件名引用它们。)

2. include this newly created font file in your document

   (在文档中包含这个新创建的字体文件)

    <script type="text/javascript" src="./pdfmake-0.1.37/vfs_fonts.js"></script> 

3. add your fonts to pdfmake

   (将字体添加到pdfmake)

    pdfMake.fonts = { Arial: { normal: 'arial.ttf', bold: 'arialbd.ttf', italics: 'ariali.ttf', bolditalics: 'arialbi.ttf' } }; 

4. Add your font to the Datatable

   (将字体添加到数据表)

    buttons = [ { customize: function (doc) { doc.defaultStyle = { font: 'Arial' } } } ] 

Some helpful links:

(一些有用的链接：)

DataTables & PDFmake - question on how to set a new font to the datatable

(DataTables和PDFmake-有关如何为数据表设置新字体的问题)

https://datatables.net/forums/discussion/51827/how-i-change-font-family-in-pdf-export - datatable community question on how to change the font family.

(https://datatables.net/forums/discussion/51827/how-i-change-font-family-in-pdf-export-有关如何更改字体系列的数据表社区问题。)