Ticket T946869
Visible to All Users

Devextreme datagrid pdf export font support

created 4 years ago

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

Show previous comments (1)
BB BB
BORIS BLAŠKOVIĆ 4 years ago

    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:

    JavaScript
    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

    Alisher (DevExpress Support) 4 years ago

      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

      BB BB
      BORIS BLAŠKOVIĆ 4 years ago

        Hello Alisher!

        Thank you for your suggestion and the link!

        Regards,
        Boris

        Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

        Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.