PDF Not Export

[Nagendra Gupta]

Dear Team,

When I am exporting PDF in grid row grouping than it's giving below error. Please Help me for particular error.

core.mjs:6484 ERROR TypeError: Converting circular structure to JSON

    starting at object with constructor 'PdfDocument'

    property 'document' closes the circle

    at JSON.stringify (<anonymous>)

    at readableObjectToString (zone.js:1049)

    at resolvePromise (zone.js:1213)

    at zone.js:1120

    at ej2-grids.es2015.js:39806

    at ZoneDelegate.invoke (zone.js:372)

    at Object.onInvoke (core.mjs:25476)

    at ZoneDelegate.invoke (zone.js:371)

    at Zone.run (zone.js:134)

    at zone.js:1276

[Rajapandi Ravi]

Hi Nagendra, 

 

Greetings from Syncfusion support. 

 

By analyzing your error snippet, we suspect that you may having Non-ASCII characters in EJ2 Grid, and this is the cause of issue.  

 

By default, the EJ2 Grid’s PDFExport supports only the ASCII characters. So, we need to use own custom fonts to export the Non-ASCII characters in Grid. We can draw the text with Non-ASCII characters in each cell using PdfTrueTypeFont. To achieve this, we need to use the Custom font in Base64String format.  

 

You can change the default font of Grid header, content, and caption cells in the exported document by using pdfExportProperties.theme property. Please refer to the below documentation for more information. 

 

Custom font exporting in PDF: https://ej2.syncfusion.com/angular/documentation/grid/pdf-export/#add-custom-font-for-pdf-exporting 

 

In the above documentation, we used advent pro font family (in base64 string format) to achieve this. This is used only for reference purpose. 

 

You can choose any kind of font family based on your requirement. Follow the below steps to achieve this. 

 

• Download the required font family (TTF file) by using this link (https://www.fontsquirrel.com/fonts/list/language).
• Then convert the TTF file into base64 string by using this link (https://www.giftofspeed.com/base64-encoder/).
• By using this custom font, you can achieve the exporting in Grid

 

 

In the below sample, we have used japnese font to export the Grid data. 

 

Sample: https://stackblitz.com/edit/angular-dswazo-zbvchf?file=app.component.html 

 

     

 

import { customfont } from "./japnesefont"; // import your custom font in base64 String format 

---- 

export class AppComponent { 

  ---- 

  toolbarClick(args: ClickEventArgs): void { 

    const pdfExportProperties: PdfExportProperties = { 

 // use your custom font in base64String format 

      theme: { 

        header: { font: new PdfTrueTypeFont(customfont, 12) }, 

        caption: { font: new PdfTrueTypeFont(customfont, 10) }, 

        record: { font: new PdfTrueTypeFont(customfont, 9) } 

      } 

    }; 

    switch (args.item.text) { 

      case "PDF Export": 

        this.grid.pdfExport(pdfExportProperties); 

        break; 

      case "Excel Export": 

        this.grid.excelExport(); 

        break; 

      case "CSV Export": 

        this.grid.csvExport(); 

        break; 

    } 

  } 

} 

 

 

Note: The provided true type font family should support the character to draw in PDF document. Else it shows empty spaces in the pdf document.  

 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandi R