How to export the Grid when using non english font in React Grid

[Albert]

Hi ,

We are developing multi lingual app and when we have other font like sansserif arabic fonts in page, export button for the grid will not work. I would appreciate to have your advice.

Here is the sample code:

import React, { Component } from "react";

import {

  GridComponent,

  ColumnsDirective,

  ColumnDirective,

  Page,

  Toolbar,

  Filter,

  ExcelExport,

  PdfExport,

  Print,

  Resize,

  Inject

} from "@syncfusion/ej2-react-grids";

export default class Test extends Component {

  constructor(props) {

    super(props);

    this.categoryComoboDataSource = [

      {

        id: 1,

        code: "1",

        name: "سلالمخک"

      },

      {

        id: 1,

        code: "1",

        name: "سلالمخک"

      },

      {

        id: 1,

        code: "1",

        name: "سلالمخک"

      },

      {

        id: 1,

        code: "1",

        name: "سلالمخک"

      },

      {

        id: 1,

        code: "1",

        name: "سلالمخک"

      },

      {

        id: 1,

        code: "1",

        name: "سلالمخک"

      }

    ];

    this.toolbarOptions = ["ExcelExport", "PdfExport", "Print"];

    this.gridPageSetting = { pageSize: 5, pageSizes: true };

    this.toolbarClick = this.toolbarClick.bind(this);

    this.columns = [

      {

        field: "id",

        headerText: "id",

        width: 120

      },

      {

        field: "code",

        headerText: "code",

        width: 120

      },

      {

        field: "name",

        headerText: "name",

        width: 120

      }

    ];

  }

  toolbarClick(args) {

    debugger;

    switch (args.item.text) {

      case "PDF Export":

        this.itemGridInstance.pdfExport();

        break;

      case "Excel Export":

        this.itemGridInstance.excelExport();

        break;

    }

  }

  render() {

    return (

      <div>

        <GridComponent

          key="Test"

          dataSource={this.categoryComoboDataSource}

          toolbar={this.toolbarOptions}

          toolbarClick={this.toolbarClick}

          ref={itemGrid => (this.itemGridInstance = itemGrid)}

          allowPaging={true}

          pageSettings={this.gridPageSetting}

          allowFiltering={false}

          allowExcelExport={true}

          allowPdfExport={true}

          // allowResizing={true}

          allowTextWrap={true}

          enableRtl={true}

        >

          <ColumnsDirective>

            {this.columns.map(current => (

              <ColumnDirective

                key={current.id}

                field={current.field}

                headerText={current.headerText}

                width={current.width}

              />

            ))}

          </ColumnsDirective>

          <Inject services={[Toolbar, Page, PdfExport, ExcelExport, Resize]} />

        </GridComponent>

      </div>

    );

  }

}

[Pavithra Subramaniyam]

Hi Afshin 

 

Thanks for contacting Syncfusion support. 

 

By default, EJ2 Grid uses the Helvetica font in the export document( also have some standard fonts too Times Roman, Helvetica, etc,). So while using other fonts it cause the reported problem. 

To overcome this We have provided  support to use custom font (truetypefont) for exported document. You can resolve the problem by using the below way. Please check the below help documentation and code example  for more information . 

1. Download TTF file for the corresponding (custom (which font support the - symbol) font (https://www.fontsquirrel.com/fonts/list/language/thai )
2. Then convert the TTF file into base64 string (https://www.giftofspeed.com/base64-encoder/).
3. Finally apply the base64 string to pdfTrupetypeFont.

.  .  . 

import { PdfTrueTypeFont } from '@syncfusion/ej2-pdf-export'; 

import { adventProFont } from './font'; // adventProFont is a base 64 of ttf 

 

export default class App extends React.Component<{}, {}> { 

 

  .  .  . 

  public toolbarClick = (args: ClickEventArgs) => { 

    const pdfExportProperties: PdfExportProperties = { 

      theme: { 

          caption: { font: new PdfTrueTypeFont(adventProFont, 10) }, 

          header: {font:  new PdfTrueTypeFont(adventProFont, 12) }, 

          record: { font: new PdfTrueTypeFont(adventProFont, 9) } 

      } 

    }; 

    if (this.grid) { 

      this.grid.pdfExport(pdfExportProperties); 

    } 

  } 

 

  public render() { 

    this.toolbarClick = this.toolbarClick.bind(this); 

    return ( 

      <div> 

          <GridComponent id='grid' dataSource={data.slice(0, 5)} toolbar={this.toolbar} 

              allowPdfExport={true} toolbarClick={this.toolbarClick} 

              ref={g => this.grid = g}> 

              <ColumnsDirective> 

               .  .  . 

              </ColumnsDirective> 

              <Inject services={[Toolbar, PdfExport]}/> 

          </GridComponent> 

      </div> 

    ); 

  } 

} 

 

 

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

 

Regards, 

Pavithra S. 

[Emrah]

Looks like Help documentation link has been broken. Please could you make it available again? Actually I'd like to see how you applied the base64 string to pdfTrupetypeFont.

Thanks.

[Joseph Christ Nithin Issack]

Hi Emrah,

  Greetings from Syncfusion support,

  We have revamped our documentation site which was rolled out recently. You can refer the below link for the documentation mentioned in the previous update.

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

Please get back to us for further details.

Regards,

Joseph I