Export to Excel seems to uses a different font for Bold and colors than the standard text font

Question

If I build a custom return value in a

:valueAccessor="pubInformation"

pubInformation: function(field, data, column) {
let pmid = data["pmid"];
let pmc = data["pmc"];
let authors = data["authorsNames"];
let title = data["articleTitle"];
let journal = data["ISOAbbreviation"];
let citations = data["citations"]
let NIH_percent = data["nih_percentile"]
let rcr = data["relative_citation_ratio"]

res= authors + " " + title + " " + journal + "<font color='Red'> Citations: " + citations + "; NIH Percentile: " + NIH_percent + "; Relative Citation Ratio : " + rcr + ";</font> PMCID:" + pmc + " PMID: " + pmid

return (res);

}

the font size is different in the Exported Excel Spreadsheets. The standard font is Calibri 13 and the color or bolded or italicize is 10.5. Is this by design or can this be fixed to maintain the same font?

Attachment: Export__20220613T090044.252_f57952a0.zip

Jayshankar Manoharan · Answer

Hi William Morgenweck,Greetings from Syncfusion Support,Query - Export to Excel seems to uses a different font
for Bold and colors than the standard text font.By default, the return data in the grid will based upon the
exporting values so the fonts, font color, font-family cannot be changed during
the export , so we are maintaining the font-family in all styles in header,
footer are same. But we can override the font-color, font family, in the
exporting using attached documentation for you reference.Documentation: https://ej2.syncfusion.com/vue/documentation/grid/excel-export/excel-cell-style-customization/#themeWe need more details about your requirement, Please share
the following details.
 Share the complete grid
     code while exporting.
 Please ensure that while
     exporting do you customize the export in events like toolbarClick,
     excelQueryCellInfo, beforeQueryCellInfo.
 If possible, share a
     simple issue reproducible sample.
Documentation Link - https://ej2.syncfusion.com/vue/documentation/api/grid/#toolbarclickRegards,Jayshankar Manoharan.

William Morgenweck · Answer

I'm not sure I'm explaining myself correctly. In the grid I allow HTML format and I render a return value of

res= authors + " " + title + " " + journal + "<font color='Red'> Citations: " + citations + "; NIH Percentile: " + NIH_percent + "; Relative Citation Ratio : " + rcr + ";</font> PMCID:" + pmc + " PMID: " + pmid

As you can see I wrap a few of the items with a Red color font. Looks good on the screen, everything is the same font. However if I export it to Excel the text in the same sentence changes font size from 13 to 10.5

Do I need to set the font family and size in code?

Thanks for the help

Pavithra Subramaniyam · Answer

Hi William Morgenweck,Thanks for sharing the details.We could reproduce the reported behavior with our excel
exporting library. We have forwarded your query to the corresponding team, and currently, they are validating this scenario with high priority. So, we will update further
details within 2 business days( June 20th, 2022). Until then we appreciate
your patience.Regards,Pavithra S

Pavithra Subramaniyam · Answer

Hi William,Thanks for your patience.While exporting to Excel using our EJ2 Excel library, we
need to set the required Font size inside the font tag. Otherwise, the default
font size will be taken which is the default behavior. So, we suggest the
overriding the cell value inside the “excelQueryCellInfo” event.
Please refer to the below code example for more information.

function exportQueryCellInfo(args) {
    if (args.column.headerText === 'Address') {
      var index = args.value.indexOf('<font ') + 6;
      args.value =
        args.value.substr(0, index) + 'size="13" ' + args.value.substr(index);
    }
  }

https://ej2.syncfusion.com/vue/documentation/api/grid/#excelquerycellinfoPlease get back to us if you need further assistance on
this.Regards,Pavithra S