Pdf export crashes for some diacritics

[Adrian M]

Hello,

If grid has content which includes some Polish diacritics like: ł ś or ą, pdf export crashes. 

In the example that you have here https://youtu.be/-kSCD14hExE?si=enjT4N5ZaWkd7QUo  I see it working for French and German diacritics with the Calibri font. Is this a font issue, is there an option to encode them before rendering ? 

I was able to make it work by embedding a font using PdfTrueTypeFont but I'm interested to see if there are other approaches. 

Thank you

[Dineshnarasimman Muthu]

Hi Adrian ,

By default, the EJ2 Grid's PDFExport supports only ASCII characters. So, we need to use our own custom fonts to export the Non-ASCII characters in the grid. We can draw the text with non-ASCII characters in each cell using PdfTrueTypeFont. To achieve this, we need to use the Custom font in Base64String format.

You can change the default font of the Grid header, content, and caption cells in the exported document by using the pdfExportProperties.theme property. Please refer to the documentation below for more information.

Documentation for custom font exporting in PDF: 

https://ej2.syncfusion.com/react/documentation/grid/pdf-export/pdf-export-options#add-custom-font

In the above documentation, we used Algeria font family (in base64 string format) to achieve this. This is used only for reference purpose. 

The code snippet and sample have been attached for your reference.

const toolbarClick = (args) => {

  if (args.item.id === 'Grid_pdfexport') {

   var pdfExportProperties = {

        theme: {

          header: {

            font: new PdfTrueTypeFont(base64Font, 12),

          },

          caption: {

            font: new PdfTrueTypeFont(base64Font, 10),

          },

          record: {

            font: new PdfTrueTypeFont(base64Font, 9),

          },

        },

      };

      grid.pdfExport(pdfExportProperties);

  }

};

 

Sample: https://stackblitz.com/edit/react-sd3cr7?file=index.js

You can choose any kind of font family based on your requirement. Follow the below steps to achieve this. 

• Download the required font family (TTF file) by using this link ( https://www.fontsquirrel.com/fonts/list/language).
• Then convert the TTF file into base64 string by using this link ( https://www.giftofspeed.com/base64-encoder/).
• By using this custom font, you can achieve the exporting in Grid.

Note: The provided true type font family should support the character to draw in PDF document. Else it shows empty spaces in the pdf document.  

Regards,

Dineshnarasimman M

[Adrian M]

Hi Dineshnarasimman,

How would I include a regular and a bold font ?

I included the regular font per your instructions but if I setup the theme like this,

  theme: {

          header: {

            font: new PdfTrueTypeFont(openSansFont, 8, PdfFontStyle.Bold),

          },

          caption: {

            font: new PdfTrueTypeFont(openSansFont, 8),

          },

          record: {

            font: new PdfTrueTypeFont(openSansFont, 8),

          },

        },

it doesn't work. Would I need two base 64 fonts one for regular and one for bold ?

[Dineshnarasimman Muthu]

Hi Adrian,

Based on your query, it appears that you need to apply a bold font style specifically to the grid headers while keeping the records in a regular font when exporting the Syncfusion EJ2 Grid to a PDF. Since the built-in PDF export feature in Syncfusion EJ2 Grid uses standard system fonts, it does not automatically support custom font styles unless explicitly provided.

To achieve this using the pdfTrueTypeFont property in the pdfExport feature, you must include two separate Base64-encoded font files: one for the regular font and another for the bold font.

You can choose any kind of font family based on your requirement. Follow the below steps to achieve this. 

• Download the required font family (TTF file) by using this link ( https://www.fontsquirrel.com/fonts/list/language).
• Then convert the TTF file into base64 string by using this link ( https://www.giftofspeed.com/base64-encoder/).

By using this custom font in the headers and records in the pdfExportProperties, you can achieve your requirement.

Regards,

Dineshnarasimman M