Hello!
I'm trying datagrid's pdf export feature in 20.2.3, but having issues with our specific fonts (Croatian).
I went on jspdf documentation to check for font support, and was trying to add font as suggested in documentation, it seems to work with custom text like headers, but does not work for datagrid table like column headers and columns itself…
Can you please share an example how to modify fonts inside exported datagrid's table to have our specific language letters?
I have attached pdf file with current progress and image of datagrid which I want to export… I have downloaded .ttf Roboto Normal with support for Croatian and I was using method described in jspdf documentation As you can see in attached pdf - header is giving our specific letters but table layout does not…
Code I'm using for exporting is:
JavaScript//pdf test
function exportToPDF(e, fileName, owner, fontSize) {
//instanca za pdf
var doc = new jsPDF();
// add the font to jsPDF
//pdfFont variable is base64 string declared outside of this function!!
doc.addFileToVFS('Roboto-Regular-normal.ttf', pdfFont);
doc.addFont('Roboto-Regular-normal.ttf', 'Roboto-Regular', 'normal');
doc.setFont('Roboto-Regular');
//font
let fs = 10;
if (fontSize) fs = fontSize;
doc.setFontSize(fs);
//stranica
let pageHeight = doc.internal.pageSize.height;
let pageWidth = doc.internal.pageSize.width;
//headeri
if (owner) doc.text(owner, 15, 10, { align: 'left' });
//header and font size
let ht = "ŠĐŽĆČPžđščć"; // fileName === undefined ? e.element[0].id.replace('Grid', '') : fileName;
doc.setFontSize(fs + 2);
doc.text(ht, pageWidth / 2, 10, { align: 'center' });
//regular font size
doc.setFontSize(fs);
//devextreme example
var dataGrid = e.component; //$("#gridContainer").dxDataGrid("instance");
DevExpress.pdfExporter.exportDataGrid({
jsPDFDocument: doc,
component: dataGrid
}).then(function () {
//test page numbers
let pages = doc.internal.getNumberOfPages();
for (let j = 1; j < pages + 1; j++) {
doc.setPage(j);
doc.text('Stranica ' + j + ' od ' + pages, pageWidth - 15, 10, { align: 'right' });
}
//saving
doc.save((fileName === undefined ? e.element[0].id : fileName) + '.pdf');
});
}
Thank you!
Regards,
Boris
Hello!
Following up previous post:
I have partially succeeded getting Croatian letters into pdf export, but also having issues when datagrid is in grouping state so following code is working if I add autoTableOptions to pdfExporter as stated in documentation (excerpt from the code, rest is same as in previous post except header title):
.... var dataGrid = e.component; //$("#gridContainer").dxDataGrid("instance"); DevExpress.pdfExporter.exportDataGrid({ jsPDFDocument: doc, component: dataGrid, //added auto table options autoTableOptions: { styles: { font: 'Roboto-Regular', fontStyle: 'normal' }, headStyles: { //fillColor: [255, 0, 0], font: 'Roboto-Regular', fontStyle: 'normal' } } //// }).then(function () { //total pages let pages = doc.internal.getNumberOfPages(); //page numbers for (let j = 1; j < pages + 1; j++) { doc.setPage(j); doc.text('Stranica ' + j + ' od ' + pages, pageWidth - 15, 10, { align: 'right' }); } //save doc.save((fileName === undefined ? e.element[0].id : fileName) + '.pdf'); });
but this does not work when datagrid is in grouping mode and I'm getting following error in chrome console:
jquery-3.5.1.js:4046 jQuery.Deferred exception: this.jsPDFDocument.setFontStyle is not a function TypeError: this.jsPDFDocument.setFontStyle is not a function
at t.applyStyles (http://localhost:55997/Scripts/jspdf/jspdf.plugin.autotable.min.js:10:4880))
at Object.e.getStringWidth (http://localhost:55997/Scripts/jspdf/jspdf.plugin.autotable.min.js:10:1598))
at http://localhost:55997/Scripts/jspdf/jspdf.plugin.autotable.min.js:10:29942
at Array.forEach (<anonymous>)
at http://localhost:55997/Scripts/jspdf/jspdf.plugin.autotable.min.js:10:29739
at Object.e.calculateWidths (http://localhost:55997/Scripts/jspdf/jspdf.plugin.autotable.min.js:10:30978))
at Object.e.createTable (http://localhost:55997/Scripts/jspdf/jspdf.plugin.autotable.min.js:10:21790))
at Object.t.API.autoTable (http://localhost:55997/Scripts/jspdf/jspdf.plugin.autotable.min.js:10:22696))
at http://localhost:55997/Scripts/dx.all.debug.js:144083:39
at fire (http://localhost:55997/Scripts/jquery-3.5.1.js:3496:31)) undefined
Can you please include in some code example how to solve this situation?
I guess it has something with bold fonts which are used for grouping row in exported document…
I have attached image of grid in grouping mode and pdf where it is normally working without grouping…
Thanks!
Regards,
Boris
Hello!
Seems I got some results after some head banging and scanning stackoverflow posts for jspdf and autotable…
I have added Roboto fonts as normal and bold under same name into jspdf:
doc.addFileToVFS('Roboto-Regular.ttf', pdfFontNormalBase64string); doc.addFileToVFS('Roboto-Bold.ttf', pdfFontBoldBase64string); doc.addFont('Roboto-Regular.ttf', 'Roboto', 'normal'); doc.addFont('Roboto-Bold.ttf', 'Roboto', 'bold'); doc.setFont('Roboto');
This works fine when datagrid is in grouping mode…
Now I'm trying to add fonts without converting them into base64string, basically from /content/fonts/ folder…
Thanks!
Regards,
Boris
Hi Boris,
I am happy to hear that you managed to solve the issue.
As for adding fonts without converting them to a base64 encoded string, we recommend converting them to a base64 encoded string. Otherwise, a PDF document may display characters incorrectly. Check the following document for more information: https://github.com/MrRio/jsPDF#use-of-unicode-characters–utf-8
Hello Alisher!
Thank you for your suggestion and the link!
Regards,
Boris