We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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>
    );
  }
}


3 Replies

PS Pavithra Subramaniyam Syncfusion Team October 10, 2019 06:51 AM UTC

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(05)} toolbar={this.toolbar} 
              allowPdfExport={true} toolbarClick={this.toolbarClick} 
              ref={g => this.grid = g}> 
              <ColumnsDirective> 
               .  .  . 
              </ColumnsDirective> 
              <Inject services={[ToolbarPdfExport]}/> 
          </GridComponent> 
      </div> 
    ); 
  } 
} 
 
 
 
Regards, 
Pavithra S. 



EM Emrah January 19, 2023 09:56 AM UTC

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.



JC Joseph Christ Nithin Issack Syncfusion Team January 23, 2023 03:42 AM UTC

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.


  Documentationhttps://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


Loader.
Live Chat Icon For mobile
Up arrow icon