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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

exporting to pdf when using non english font is not working

Thread ID:

Created:

Updated:

Platform:

Replies:

148193 Oct 9,2019 04:49 PM UTC Oct 10,2019 06:51 AM UTC React - EJ 2 1
loading
Tags: Grid
Albert
Asked On October 9, 2019 04:49 PM UTC

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 [Syncfusion]
Replied On 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(0, 5)} toolbar={this.toolbar} 
              allowPdfExport={true} toolbarClick={this.toolbarClick} 
              ref={g => this.grid = g}> 
              <ColumnsDirective> 
               .  .  . 
              </ColumnsDirective> 
              <Inject services={[Toolbar, PdfExport]}/> 
          </GridComponent> 
      </div> 
    ); 
  } 
} 
 
 
 
Regards, 
Pavithra S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon