Unable to show emoji when generate excel file using javascript

Question

I'm trying to generate an excel file which contains emojis. After the excel file is generated and I opened it in google spreadsheet, the emojis can be shown properly. (in Numbers is fine too), please see the expected link.

However when I opened that file in Ms.excel: I got this: actual

Here is data I passed to feedbackGenerator to produce excel file in the figure above:

const renderTableHeader = titleArray => {
    let row = "";
    for (let i in titleArray) {
        row += titleArray[i] + ',';
    }
    row = row.slice(0, -1);
    row += '\r\n';
    return row;
}

const feedbackGenerator = (data) => {
    let arrData = typeof data !== 'object' ? JSON.parse(data) : data;
    let file = 'sep=,\r\n\n';

    const headerArray = ['Date', 'Feedback'];
    file += renderTableHeader(headerArray);

    for (let i = 0; i < arrData.length; i++) {
        let row = "";
        for (var index in arrData[i]) {
            row += '"' + arrData[i][index] + '",';
        }
        row.slice(0, row.length - 1);
        file += row + '\r\n';
    }

    const fileName = `feedback.xls`
    generateExcelFile(file, fileName)
};

const generateExcelFile = (file, fileName) => {

  let uri = 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet ;charset=utf-8,' + encodeURIComponent(file);

  let link = document.createElement("a");
  link.href = uri;

  link.style = "visibility:hidden";
  link.download = fileName;

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

const data = [
  {
    Date: '10 Jul 2019 09:41',
    Feedback: 'mencoba emoji 😊😊😊😄😄😂😂😂'
  },
  {
    Date: '10 Jul 2019 09:41',
    Feedback: 'test emoji lagi 😍😍😍✌🏿✌🏿😳😳😳'
  }
]

// generate excel file
feedbackGenerator(data);

I expect the emoji to be shown properly. If it's shown as old emoji, then it's fine as long as it's not unknown chars.

expected

Answer 1

You do not generate an Excel file!

You generate a CSV file and give it the extension ".xls". Excel reports an error, if you try to open such a file. But Excel's default error handling is to open the file as CSV file. But Excel does not allow you to select the input encoding, if you open the file in this way.

Not being able to select the input encoding is your problem. This is what you get, if you open an UTF-8 input as ANSI:

sep=,

Date,Feedback
"10 Jul 2019 09:41","mencoba emoji 😊😊😊😄😄😂😂😂",
"10 Jul 2019 09:41","test emoji lagi ðŸ˜ðŸ˜ðŸ˜âœŒðŸ¿âœŒðŸ¿ðŸ˜³ðŸ˜³ðŸ˜³",

That is exactly what Excel does.

This means you have to encode your XLS labeled CSV file as ANSI. But this is not possible, because it is not possible to encode UTF-8 emojis in ANSI.

So the only option is to generate a CSV file and call it also CSV in order to import it in Excel. How to import a UTF-8 CSV is explained here. If you do so, the Emojis are rendered correctly: