Pdf Export gives javascript error while Excel Export is working

[ERTEM]

Hello , I have both tried excel and pdf export on grid that has server side paging. Excel export is working as expected , exports all the rows.

For the pdf export it gives an error:



It is pretty standart grid configuration with custom toolbar options:

@{

 commands.Add(new

 {

     type = "View",

     buttonOption = new

     {

         iconCss = "e-icons e-eye",

         cssClass = "e-flat",

         iconPosition = "Left"

     }

 });

 commands.Add(new

 {

     type = "Delete",

     buttonOption = new

     {

         iconCss = "e-icons e-delete",

         cssClass = "e-flat",

         iconPosition = "Left"

     }

 });

 List<object> toolbarItems = new List<object>();

 toolbarItems.Add("Add");

 toolbarItems.Add("PdfExport");

 toolbarItems.Add("ExcelExport");

}


//Grid

 <ejs-grid id="grid" dataSource=((System.Data.DataTable)ViewBag.DataSource) allowPaging="true" allowPdfExport="true" allowExcelExport="true" gridLines="Both"

           commandClick="commandClick" toolbarClick="toolbarClick" toolbar=toolbarItems>

     <e-grid-editSettings allowAdding="true" allowDeleting="true"></e-grid-editSettings>

     <e-data-manager url="@Url.Action("UrlDatasource", "Sensors")" adaptor="UrlAdaptor"></e-data-manager>

     <e-grid-textwrapsettings wrapMode="Both"></e-grid-textwrapsettings>

     <e-grid-pagesettings pageSizes="@(new string[] { "5", "10", "15", "20"})" pageSize=10> </e-grid-pagesettings>
.......

@section Scripts

   <script>

  var hostName = '@Url.Content("~")';

  function commandClick(args) {

      if (args.commandColumn.type == 'View') {

          var url = hostName + '/Sensors/details/' + args.rowData.id + '?returnURL=/Sensors';

          window.location.rel='nofollow' href = url;

      }

      if (args.commandColumn.type == 'Delete') {

          SwalConfirm("warning", text, "", yes, cancel, function (result) {

              if (result) {

                  showLoader();

                  var returnURL = hostName + '/Sensors';

                  $("#returnURL").val(returnURL);

                  $("#ItemId").val(args.rowData.id);

                  $("#DeleteForm").submit();

              }

          });

      }

  }

  function toolbarClick(args) {

      var grid = document.getElementById("grid").ej2_instances[0];

      if (args.item.id === 'grid_add') {

          args.cancel = true;

          var url = hostName + '/Sensors/create/' + '?returnURL=/Sensors';

          window.location.rel='nofollow' href = url;

      }

     //Pdf export does not Work!

      else if (args.item.id === 'grid_pdfexport') {

          alert('pdf export');

          grid.pdfExport();

      }

     //Excel export Works

      else if (args.item.id === 'grid_excelexport') {

          alert('excel export');

          grid.excelExport();

      }

      else { }

  }

   </script>

       else { }

   }

[Dineshnarasimman Muthu]

Hi,

Query: Error when exporting grid to PDF export

Based on the error which you have attached, we suspect that the error is due to special characters in the grid. By default, the EJ2 Grid's PDFExport supports only ASCII characters. So, we need to use our own custom fonts to export the Non-ASCII characters in the 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 the Grid header, content, and caption cells in the exported document by using the pdfExportProperties.theme property. Please refer to the documentation below for more information.

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

In the above documentation, we used Algeria 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.

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.  

If you still face any issue, please provide the column definitions of the grid and ensure us whether any special characters or any different language used in the grid dataSource.

Regards,

Dineshnarasimman M

[ERTEM]

Yes, grid datasource has Arabia characters. Both in header Columns and cells may have those characters.
Does it cause this issue? In syncfusion pdf document page it is written:

"By default, the Grid uses the Helvetica font in the exported document"

As I know Helvetica is able to show Arabia characters. By the way I will try with downloading TTF


PS: I cannot write Arabi-c as word here it says :
"You have tried to enter the word "ARABI" which is not allowed on this site. Please also check this"
so I wrote Arabia

Edit: I have tried with custom font which support arabi-c but still getting same error. Could be related javascript files order on _layout page?

[Dineshnarasimman Muthu]

Hi,

We have reviewed your query and identified that when using a custom font or a standard font like Helvetica, Arabic characters in the grid data may not render correctly in the exported PDF. To resolve this, we recommend using the Arial TTF custom font for PDF export.

We have prepared a sample demonstrating the correct rendering of Arabic characters in the grid’s data source by specifying the Arial TTF font in pdfExportProperties.

Below is the implementation snippet:

 

 var pdfExportProperties = {

     theme: {

        header: {

            font: new ej.pdfexport.PdfTrueTypeFont(arialFont, 12),

            bold: true,

        },

 

 grid.pdfExport(pdfExportProperties);

 

Additionally, we have provided the Base64-encoded Arial TTF font in the attached sample for your reference.

The video of demonstration has been attached for your reference.

Video: 

If you still face any issue, please replicate the issue in the provided sample by modifying the sample.

Regards,

Dineshnarasimman M

Attachment: GridpdfExportCustomFont_5178c1ef.zip