Encoding issue with Excel on OSX

[kilianDev]

Hello,

I encounter an issue with the encoding, when opening an exported csv file with Excel (on OSX).
My csv contains some accentuated caracters.
But, Excel does not correctly detect the encoding :

The csv is actually an UTF-8 file, I checked with a text editor :

One weird thing, is that Excel does not seem to recognize the encoding when importing the csv manually :

I tried playing with this option :

exporterOlderExcelCompatibility: true

But with no luck.
It just made a mess with the first caracters :

I made the test that if I convert my UTF-8 file into UTF-16LE, then Excel will open it correctly.
Is there any option to set the encoding during the export ? Or maybe a workaround to make it work ?

Thanks in advance for any help.

Regards,

Kilian

[ghiscoding]

Sorry very late to the game but I happen to fall on your issue today and actually resolved it, so might as well send you the resolution. Well actually, it is specific to UI-Grid, I was looking at the UI-Grid code to get me going and found some of the answers while looking at their code. So anyhow, I'll post my javascript code to get it all working.

First you need to encode it in UTF-16BE or UTF16-LE, you can do that with this lib encoding.js.

Second, I did have to use the Bom escaping trick (\uFEFF)

Third, I had various results depending on browsers and so I had to do some tricks depending on which browser it is (IE is always different)

// encode your csv data to UTF-16BE (or LE)
data = new TextEncoder('utf-16be').encode(csvContent);

  // create a Blob object for the download
  const blob = new Blob(['\uFEFF', data], {
    type: blobType
  });

  // if it's IE/Edge, then make a different JS export
  if (typeof navigator.msSaveOrOpenBlob === 'function') {
    navigator.msSaveOrOpenBlob(blob, filename);
  } else {
    // this trick will generate a temp <a /> tag that you can trigger a hidden click for it to start downloading
    const link = document.createElement('a');
    const csvUrl = URL.createObjectURL(blob);

    link.textContent = 'download';
    link.href = csvUrl;
    link.setAttribute('download', filename);

    // set the visibility hidden so there is no effect on your web-layout
    link.style.visibility = 'hidden';

    // this part will append the anchor tag and remove it after automatic click
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

and that works, I can even put unicorn emoji and I see it showing in my Excel from any browser download.

NOTE: I am not on Mac and I am using Office 365 which is not that old.