Export UTF-8 chars PDF with Bootstrap-Table - pdf

Question

I'm trying to generate a PDF with Bootstrap-table, for this the documentation said to use tableExport.js which in turn uses jsPDF to generate the pdfs. The actual problem is that the data is in spanish containing chars such as á,é,í,ó,ú and ñ that are not shown correctly in the pdf. Reading jsPDF's documentation it mentions that the 14 standard fonts in PDF are limited to the ASCII-codepage.
Looking further into it jsPDF's documentation says it can be done. If you want to use UTF-8 you have to integrate a custom font, which provides the needed glyphs. jsPDF supports .ttf-files. So if you want to have for example Chinese text in your pdf, your font has to have the necessary Chinese glyphs. So, check if your font supports the wanted glyphs or else it will show garbled characters instead of the right text.
To add the font to jsPDF use our fontconverter in /fontconverter/fontconverter.html. The fontconverter will create a js-file with the content of the provided ttf-file as base64 encoded string and additional code for jsPDF. You just have to add this generated js-File to your project. You are then ready to go to use setFont-method in your code and write your UTF-8 encoded text.
Alternatively you can just load the content of the *.ttf file as a binary string using fetch or XMLHttpRequest and add the font to the PDF file:
But I have no idea how to integrate both codes. The PDF generates perfectly with my code exept for the fact that some chars dont look correct. As you can see in the section of my code I never instanciate jsPDF, I use Bootstrap-table options
Im Working on a .net project on Visual Studio
------------This is my code----------------------------------------------
$(function () {
function DoCellData(cell, row, col, data) { }
function DoBeforeAutotable(table, headers, rows, AutotableSettings) { }
$("#frm-Search").on("submit", function (event) {
event.preventDefault();
var $frm = $(this);
var formData = $frm.serializeObject();
if ($frm.valid()) {
/*loading(true);*/
GetSpanishData(formData).then(function (result) {
$("#tbReport").bootstrapTable({
search: true,
pagination: true,
export: true,
exportOptions: {
fileName: 'TheSpanishReport',
jspdf: {
format: 'bestfit',
margins: { left: 20, right: 20, top: 20, bottom: 20 },
autotable: {
styles: { overflow: 'linebreak' },
tableWidth: 'wrap',
tableExport: {
onBeforeAutotable: DoBeforeAutotable,
onCellData: DoCellData
}
}
},
},
exportTypes: ['csv', 'excel', 'pdf'],
data: result
});
$("#tbReport").bootstrapTable('refreshOptions', {
data: result
});
$("#tableReport").attr("hidden", false);
});
}
return false;
}).validate();
});
function GetSpanishData(data) {
return $.ajax({
url: ServerAdress/GetSpanishData',
type: 'POST',
dataType: 'json',
data: AntiForgeryToken(data)
});
}`
---------Code to integare font into PDF as described on jsPDF's Documentation----------
`const doc = new jsPDF();
const myFont = ... // load the *.ttf font file as binary string`
// add the font to jsPDF
doc.addFileToVFS("MyFont.ttf", myFont);
doc.addFont("MyFont.ttf", "MyFont", "normal");
doc.setFont("MyFont");
-----------------I've tryed converting a font to base64 as asked in the documentation and loading the js to the project then adding to the jsPDF section of the Bootstrap-Table parametes the option setFont, but it does not work---------------------------------------
jspdf: {
setFont:'MyFontName',
format: 'bestfit',
margins: { left: 20, right: 20, top: 20, bottom: 20 },
autotable: {
styles: { overflow: 'linebreak' },
tableWidth: 'wrap',
tableExport: {
onBeforeAutotable: DoBeforeAutotable,
onCellData: DoCellData
}
}
},

Answer 1

I had a similar problem today (exporting pdfs but with german umlaute ä ö ü from bootstrap-table), this worked for me:
you can use pdfmake instead of jspdf with tableExport.
include pdfmake instead of jspdf:
Many HTML stylings can be converted to PDF with jsPDF, but support for
non-western character sets is almost non-existent. Especially if you
want to export Arabic or Chinese characters to your PDF file, you can
use pdfmake as an alternative PDF producer. The disadvantage compared
to jspdf is that using pdfmake has a reduced styling capability. To
use pdfmake enable the pdfmake option and instead of the jsPDF files
include
<script type="text/javascript" src="libs/pdfmake/pdfmake.min.js"></script>
<script type="text/javascript" src="libs/pdfmake/vfs_fonts.js"></script>
<!-- To export arabic characters include mirza_fonts.js _instead_ of vfs_fonts.js
<script type="text/javascript" src="libs/pdfmake/mirza_fonts.js"></script>
-->
<!-- For a chinese font include either gbsn00lp_fonts.js or ZCOOLXiaoWei_fonts.js _instead_ of vfs_fonts.js
<script type="text/javascript" src="libs/pdfmake/gbsn00lp_fonts.js"></script>
-->
(from https://github.com/hhurz/tableExport.jquery.plugin#installation)
npm pdfmake
adapt your bootstrapTable exportOptions:
exportOptions: {
fileName: 'TheGermanReport',
pdfmake: {
enabled: true,
docDefinition: {
pageMargins: [ 20, 20, 20, 20 ]
}
}
},
pdfmake documentation