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

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


1 Reply

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

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon