PDF export not working

Question

I have problem with PDF export it's not work this is the error always display :pdf-export.js:143  Uncaught (in promise) tthis is my code ej.base.enableRipple(window.ripple)                grid = new ej.grids.Grid({                    dataSource: data, //from json file                    editSettings: { allowEditing: true, allowAdding: false, allowDeleting: true },                    allowPaging: true,                    allowResizing: true,                    width: 'auto',                    allowEditing: false,                    allowSorting: true,                    allowFiltering: true,                    allowExcelExport: true,                    allowPdfExport: true,
                    locale: 'ar-SA',
                    allowTextWrap: true,
                    filterSettings: { type: 'Menu' },
                    pageSettings: { pageCount: 5 },
                    toolbar: ['Edit', 'Search', 'ExcelExport', 'PdfExport','Print'],
                    commandClick: commandClick,
                    columns: [
                        {
                            field: 'TICKIT_ID', headerText: 'TICKIT_ID', textAlign: 'Center',
                            width: 160
                        },
                        {
                            field: 'USER_NAME', headerText: 'USER_NAME', textAlign: 'Center',
                            width: 180
                        },
                        {
                            field: 'CURRENT_USER_NAME', headerText: 'CURRENT_USER_NAME', textAlign: 'Center',
                            width: 180
                        },
                        {
                            field: 'PRIORITY_NAME', headerText: 'PRIORITY_NAME', textAlign: 'Center', template: "#PRIORITYTemplate",
                            width: 160
                        },
                        {
                            field: 'BRANCH_NAME', headerText: 'BRANCH_NAME', textAlign: 'Center',
                            width: 150
                        },
                        {
                            field: 'SUB_COST_CENTERS_NAME', headerText: 'SUB_COST_CENTERS_NAME', textAlign: 'Center',
                            width: 150
                        },
                        {
                            field: 'CREATED_IN', headerText: 'CREATED_IN',  textAlign: 'Center',
                            width: 170
                        },
                        {
                            field: 'TICKIT_CATEGORY_NAME', headerText: 'TICKIT_CATEGORY_NAME', textAlign: 'Center',
                            width: 170
                        },
                        {
                            field: 'TICKIT_STATUS_NAME', headerText: 'TICKIT_STATUS_NAME', template: "#statusTemplate", textAlign: 'Center',
                            width: 150
                        },
                        {
                            field: 'TICKIT_TITLE', headerText: 'TICKIT_TITLE', textAlign: 'Center',
                            width: 190
                        },
                        {
                            headerText: 'Action', textAlign: 'Center', width: 260,
                            commands: [{ type:'Notes', buttonOption: { content: 'Notes', cssClass: 'e-info' } }]
                        }
                    ],
                });
​
                grid.appendTo('#Grid');
​
                grid.toolbarClick = function (args) {
                    if (args.item.id === 'Grid_pdfexport') {
                        grid.pdfExport(getPdfExportProperties());
                    }
                    if (args.item.id === 'Grid_excelexport') {
                        grid.excelExport(getExcelExportProperties());
                    }
                    if (args.item.id === 'Grid_csvexport') {
                        grid.csvExport();
                    }
                };
​
                grid.excelQueryCellInfo = (args) => {
                    if (args.column.field == 'PRIORITY_NAME') {
                        if (args.value == 'Medium') {
                            args.style = { backgroundColor: '#f7d00e' };
                        }
                        else if (args.value == 'Normal') {
                            args.style = { backgroundColor: '#697e99' };
                        }
                        else {
                            args.style = { backgroundColor: '#FF0000' };
                        }
                    }
                    else if (args.column.field == 'TICKIT_STATUS_NAME') {
                        if (args.value == 'UploadRequest') {
                            args.style = { backgroundColor: '#ff562f' };
                        }
                        else if (args.value == 'Replied') {
                            args.style = { backgroundColor: '#0052cc' };
                        }
                        else if (args.value == 'Seen') {
                            args.style = { backgroundColor: '#00baff' };
                        }
                        else {
                            args.style = { backgroundColor: '#04a08b' };
                        }
                    }
                }

function getPdfExportProperties() {

return {

header: {

fromTop: 0,

height: 120,

contents: [

{

type: 'Text',

value: 'Ticket',

position: { x: 280, y: 0 },

style: { textBrushColor: '#C25050', fontSize: 25 },

}

]

},

footer: {

fromBottom: 160,

height: 100,

contents: [

{

type: 'PageNumber',

pageNumberType: 'Arabic',

format: 'Page {$current} of {$total}', //optional

position: { x: 0, y: 25 },

style: { textBrushColor: '#000000', fontSize: 15, hAlign: 'Center' }

}

]

},

//grid.columns[3].visible = false,

fileName: "Ticket.pdf",

pageOrientation: 'Landscape',

};

}

Harini Kannan · Answer

Hi enas,In your index.js code, when defining the getPdfExportProperties()
function, it is important to include the position and style parameters. If
these parameters are not defined, it can result in the error being displayed .
To resolve this error and prevent the "Uncaught (in promise) t"
error, please ensure that you include the position and style parameters when
defining the getPdfExportProperties() function. We have provided the sample for
your reference.[index.js]

footer: {
          fromBottom: 160,
          height: 150,
          contents: [
              {
                  type: 'PageNumber',
                  pageNumberType: 'Arabic',
                  format: 'Page {$current} of {$total}',
                  position: { x: 0, y: 25 },
                  style: { textBrushColor: '#ffff80', fontSize: 15,hAlign: 'Center' }
              }
          ]
      }

Sample: https://stackblitz.com/edit/sbd6vk-ydxjkm?file=index.jsKindly get back to us if you have any concern. Regards,Harini k

enas · Answer

it still not work

Harini Kannan · Answer

Hi  enas,We understand that you are facing an issue while exporting
the Grid to pdf. However, the issue has not been reproduced on our side, even
with the same code snippet  you provided. Since the error "Uncaught
(in promise)" hasn't been reproduced on our side, we kindly request
you to share a reproducible sample of the issue along with the steps to
reproduce it. Alternatively, you can try to reproduce the issue using
the provided sample. This will help us better understand the issue you are
facing and enable us to provide you with a prompt solution.Sample: https://stackblitz.com/edit/sbd6vk-c1muor?file=index.jsAs we have tried to replicate the issue from our side but we were unable
to reproduce the issue.  We have provided a video demo for your reference.Regards,HariniAttachment: videodemo_(6)_ae73dee.zip

enas · Answer

I noticed this problem occurs when I display the data remotely, while it does not appear when I add it locally. I do not know what the exact problem is. All the data that returns and appears in the grid has the same format. I provided a video demo explaining the problem

Attachment: 03.08.2023_15.44.46_REC_bc1eb351.zip

Harini Kannan · Answer

Hi enas,
 We
 suspecting that your Grid dataSource or column headers may contain any
special characters or other language letters. So, exporting the Grid throws a
script error.By default,
the EJ2 Grid’s PDF Export supports only ASCII characters. So, we need to
use own custom fonts to export the non-ASCII characters in Grid. Please refer
to the below documentation for more information.https://ej2.syncfusion.com/documentation/grid/pdf-export/pdf-export-options/#font-customizationIn the above
documentation, we used the advent pro font family (in base64 string format) to
achieve this. This is used only for reference purposes.You can
export (PDF) the different language text and special characters using PdfTrueTypeFont.
To export a custom font in the grid, we need to convert that custom font into a
base64 string and use it as PdfTrueTypeFont. Please refer to
the below code example and the attached sample for more information.

import { data, adventProFont } from './datasource.ts';
  import { PdfTrueTypeFont } from '@syncfusion/ej2-pdf-export';
  .   .   .
  let grid: Grid = new Grid({
  dataSource: data,
  allowPaging: true,
  allowPdfExport: true,
  allowGrouping: true,
  toolbar: ['PdfExport'],
  columns: [
      { field: 'OrderID', headerText: 'Rendelés azonosító', textAlign: 'Right', width: 120, type: 'number' }
  ],
  height: 172
  });
  grid.appendTo('#Grid');
  grid.toolbarClick = (args: Object) => {
  if (args['item'].id === 'Grid_pdfexport') {
      let pdfExportProperties: PdfExportProperties = {
          theme: {
              header: {font:  new PdfTrueTypeFont(adventProFont, 12) },
              caption: { font: new PdfTrueTypeFont(adventProFont, 10) },
              record: { font: new PdfTrueTypeFont(adventProFont, 9) }
          }
      };
      grid.pdfExport(pdfExportProperties);
  }
  }

Note: The provided true type font should
support the character to draw in PDF document. Else it shows empty spaces in
the pdf document.Follow the
below steps to get the base64 string for the custom font. 
 Download TTF file for
     the corresponding (custom) font ( https://www.fontsquirrel.com/fonts/list/language).
 Then convert the TTF file
     into base64 string ( https://www.giftofspeed.com/base64-encoder/).
 Finally, apply the base64 string
     to pdfTrupetypeFont.
Can you
please confirm whether the issue persists even after implementing these
changes.Regards,Harini K