refreshing cell value through pdfQueryCellInfo when exports PDF file

It didn’t work in case of any Chinese characters it contains when refreshing cell value through pdfQueryCellInfo when exports PDF file.
The report to import has characters with the font ‘Microsoft JhengHei ‘ , it worked well even it contains Chinese characters if no refreshing value event was performed by pdfQueryCellInfo 

tecPDFQueryCellInfo(e) {
        if (e.data) {
            switch (e.data[ReportFields.Field_ReportRowType]) {
                case ReportRowType.Group:
                    if (e.column.field === e.data[ReportFields.Field_ReportIdentityField]) {
                        e.colSpan = this.tecgrid.grid.getVisibleColumns().length;
                        e.value = e.data[ReportFields.Field_ReportDisplayValue]; //  Chinese characters it contains
                    }
}

  const pdfExportProperties: PdfExportProperties = {
                theme: {
                    caption: { font: new PdfTrueTypeFont(msyhlFont, 10) },
                    header: { font: new PdfTrueTypeFont(msyhlFont, 10) },
                    record: { font: new PdfTrueTypeFont(msyhlFont, 9) }
                }
            };


3 Replies 1 reply marked as answer

RR Rajapandi Ravi Syncfusion Team May 11, 2021 11:56 AM UTC

Hi techlandandyzhang, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you are facing the problem while refreshing the cell value. Based on your query we have prepared a sample and trye to reproduce your reported problem. But it was unsuccessful. Please refer the below code example and sample for more information. 

 
export class AppComponent { 

  @ViewChild('grid', { static: true }) public grid: GridComponent; 
  public data: object[]; 
  public pageOptions; 
    public toolbarOptions: ToolbarItems[]; 

    pdfQueryCellInfo(args: any) { 
      if(args.value == "VINET") { 
        args.value = "阿斯蒂芬"; //Chinese character 
      } 
    } 

  ngOnInit(): void { 
    this.data = hierarchyOrderdata; 
    this.pageOptions = { pageSize: 6 }; 
        this.toolbarOptions = ['PdfExport']; 
  }  
  toolbarClick(args): void { 
        if (args.item.properties.text == "PDF導出") { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name 
            const pdfExportProperties = { 
                theme: { 
                    header: { font: new PdfTrueTypeFont(adventProFont, 12) }, 
                    caption: { font: new PdfTrueTypeFont(adventProFont, 10) }, 
                    record: { font: new PdfTrueTypeFont(adventProFont, 9) } 
                } 
            }; 
            this.grid.pdfExport(pdfExportProperties); 
        } 
    } 
 


Screenshot: 

 

If you still face the issue, please share the below details that will be helpful for us to provide better solution.  

1)      Please share your syncfusion package version 

2)       Please share any issue reproducible sample or try to reproduce the issue with our above attached sample. 

Regards,
Rajapandi R 



TE techlandandyzhang May 12, 2021 07:36 AM UTC

hi Rajapandi R :

The problem is the value with Chinese characters is variable and the font should be bold. When I applied them together, it encountered error.


Attachment: 165316465909081_2_218359f8.zip


RR Rajapandi Ravi Syncfusion Team May 13, 2021 11:38 AM UTC

Hi techlandandyzhang, 

Thanks for the update 

If you are using custom font, please refer the below code to set the bold style in PdfTrueTypeFont. The provided true type font should support the styles to draw in PDF document. Please refer the below code example and sample for more information. 

//Base64 string of Font  
let fontBase64 : string ; -- > base64String of TTF font  
let Font : PdfFont = new PdfTrueTypeFont(fontBase64, 12, PdfFontStyle.Bold);  

import { PdfTrueTypeFont, PdfFontFamily, PdfFont, PdfFontStyle } from '@syncfusion/ej2-pdf-export'; 
 
 
@Component({ 
  selector: 'app-root', 
  templateUrl: 'app.component.html', 
  styleUrls: ['app.component.css'], 
  providers: [ToolbarService, EditService, PageService] 
}) 
 
export class AppComponent { 
 
  @ViewChild('grid', { static: true }) public grid: GridComponent; 
  public data: object[]; 
  public pageOptions; 
    public toolbarOptions: ToolbarItems[]; 
    public font_bold: PdfFont = new PdfTrueTypeFont( 
      adventProFont, 
      12, 
      PdfFontStyle.Bold 
    ); 
 
  pdfQueryCellInfo(args: any) { 
    if (args.value == "VINET") { 
      args.value = "船名"; 
      args.cell.gridRow.pdfGrid.rows.getRow(0).cells.getCell(1).style.font = this.font_bold; 
    } 
  } 
 
  ngOnInit(): void { 
    this.data = hierarchyOrderdata; 
    this.pageOptions = { pageSize: 6 }; 
        this.toolbarOptions = ['PdfExport']; 
  }  
   
} 


Regards,
Rajapandi R 


Marked as answer
Loader.
Up arrow icon