PDF export throwing error for font "ArgumentOutOfRangeException:index, The character is not supported by the font."

[Parthkumar Kakadiya]

Respected Person, 

I hope you doing well.

I am using Ejs-Grid for my Angular Application. I would like to export grid data as a pdf. while doing that I am getting such error:

It seems like I am missing font. but I don't know which fonts I need to import. 

here is the code 

<ejs-grid  #grid id='Grid'
           [dataSource]='data'
           [allowPaging]="true"
           [pageSettings]='pageSettings'
           [allowSorting]="true"
           [toolbar]='toolbar'
           [allowExcelExport]='true'
           [allowPdfExport]="true"
           (toolbarClick)='toolbarClick($event)'>
    <ng-template #detailTemplate let-data>
        <table class="detailtable" width="100%">
            <colgroup>
                <col width="35%">
                <col width="35%">
                <col width="30%">
            </colgroup>
            <tbody>
            <tr>
                <td rowspan="4" style="text-align: center;">
                    <div [ngStyle]="loadProdImage(data.prodImage)"
                         class="imgformitwirkende_all">
                    </div>
                </td>
                <td>
                    <span style="font-weight: 500;">Gebuchte Produktion: </span>
                    <a [routerLink]="['/production-view',  betriebService.sanitizeForRoute(data.produktion_name), data.produktion_id]">{{data.produktion_name}} </a>
                </td>
                <td>
                    <span style="font-weight: 500;">basierend auf dem Werk: </span>
                    <a [routerLink]="['/werk-view',  betriebService.sanitizeForRoute(data.produktion_name), data.werk_ID]">{{data.produktion_name}} </a>

                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">Preis: </span> {{data.preisangabe}}
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">Anbieter: </span>
                    <a  [routerLink]="['/betrieb_view',  betriebService.sanitizeForRoute(data.anbieter_Betriewb_Name), data.anbieter_Betrieb_id]">{{data.anbieter_Betriewb_Name}}</a>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">Veranstalter: </span>
                    <a  [routerLink]="['/betrieb_view',  betriebService.sanitizeForRoute(data.veranstalter_Betrieb_Name), data.veranstalter_Betrieb_id]"> {{data.veranstalter_Betrieb_Name}} </a>
                </td>
                <td>
                </td>
            </tr>
            </tbody>
        </table>
    </ng-template>
    <e-columns>
        <e-column field='produktion_name' headerText='Gebuchte Produktion' textAlign='Right' width=90></e-column>
        <e-column field='termin_von' [format]='dateFormatOptions' headerText='Gebuchte Daten' width=120></e-column>
        <e-column field='preisangabe' headerText='Preis' textAlign='Right' width=90></e-column>
        <e-column field='anbieter_Betriewb_Name' headerText='Anbieter' textAlign='Right' width=120></e-column>
        <e-column field='veranstalter_Betrieb_Name' headerText='Veranstalter' textAlign='Right' width=120></e-column>
    </e-columns>
</ejs-grid>

toolbarClick(args: ClickEventArgs): void {
  if (args.item.id == 'Grid_pdfexport') { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
    console.log('check excel and pdf export: ', args.item.id);
    this.grid.pdfExport();
  } else if (args.item.id == 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
    console.log('check excel and pdf export: ', args.item.id);
    this.grid.excelExport();
  }
}

please provide some guidance for this error.

Regards,
Parth

[Thiyagu Subramani]

Hi Parthkumar , 

Greetings from Syncfusion support. 

By default, currently we are don’t have the support to export (Pdf Export) the Grid with detailTemplate because template has any html element or custom components. So, it is not feasible to export the template to an pdf file.   

And your reported problem – “Error: ArgumentOutOfRangeException:index, The character is not supported by the font.” occurs if the text used in grid header or content is not supported by the default fonts . So we suggest you to use TrueTypeFont instead of StandardFont to resolve the problem. Please refer to the below documentation link for using custom font while exporting.  

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

If you are still facing issue then please get back to us with issue reproducing sample if possible. 

Let us know if you have any concerns. 

Regards, 

Thiyagu S 

[Steven Lord]

I currently have the same issue and trying the solution. I would like to see what the TrueTypeFont looks like in the example. I have a Helvetica b64 but it is not working for me as of yet.

[Pavithra Subramaniyam]

Hi Steven Lord,

By default, the Grid uses the Helvetica font in the exported document. So, there is no need to use base 64 string of the Helvetica font externally for your requirement. Please refer to the below documentation link for more information.

https://helpej2.syncfusion.com/angular/documentation/grid/pdf-export/pdf-export-options#default-fonts

Regards,

Pavithra S

[Steven Lord]

I changed to Verdana and tried the changes. I still get the same error. I attached my font file.

Attachment: fonts_80923f5b.zip

[Pavithra Subramaniyam]

Hi Steven Lord,

To validate further, could you please share the below details which will be helpful for us to check the issue with our source and provide a better solution as early as possible?

1. Share the example data of your Grid.
2. Share the Syncfusion package version you are using.
3. Share an issue reproducible sample which will be easier to validate.