JS 導出數據成 csv 格式與 excle 亂碼問題

設我們有這么一個數據希望能導出成為 csv 文件

const title = {
  name: '名字',
  age: '年齡',
  sex: '性別',
  city: '所在城市',
  weight: '體重',
  height: '身高',
};
const body = [
  {
    "name": "張三",
    "age": 18,
    "sex": "男",
    "city": "北京",
    "weight": 65,
    "height": 176,

  },
  {
    "name": "李四",
    "age": 25,
    "sex": "男",
    "city": "杭州",
    "weight": 76,
    "height": 180,
  },
  {
    "name": "王五",
    "age": 20,
    "sex": "女",
    "city": "上,海",
    "weight": 50,
    "height": 168,
  }
];

直接上代碼

// 拼接 csv 格式
function generateCSV(title, body) {
  const keys = Object.keys(title);
  let titleText = Object.values(title).join(',');
  let dataText = body.map(row => {
    return keys.map(key => {
      // 關鍵的一步，為了防止代碼里出現逗號，那么就需要用引號包裹
      return `"${row[key]}"`;
    }).join(',')
  }).join('\n')

  // \uFEFF 是 bom 頭，不加這個將會在微軟的 excle 那兒亂碼
  downloadFile(['\ufeff', `${titleText}\n${dataText}`], 'test.csv', 'text/csv, charset=UTF-8');
}

// 下載文件
function downloadFile(content, filename, type='text/plain') {
  let blob = new Blob(content, {type});

  // var text = await (new Response(blob)).text();
  // console.log(text);

  let csvUrl = URL.createObjectURL(blob);
  let tagA = document.createElement('a');
  tagA.setAttribute('download', 'download.csv');
  tagA.setAttribute('href', csvUrl);
  tagA.setAttribute('style', 'display: none');

  // 觸發下載
  document.body.appendChild(tagA);
  tagA.click();
  // 刪除節點
  document.body.removeChild(tagA);
  window.URL.revokeObjectURL(csvUrl)
  tagA = null;
}

generateCSV(title, body);

csv 原內容是這樣的。

名字,年齡,性別,所在城市,體重,身高
"張三","18","男","北京","65","176"
"李四","25","男","杭州","76","180"
"王五","20","女","上,海","50","168"

注意如果你的內容里有逗號，若不想被 csv 判定為分隔，那么需要用雙引號包裹。

問題

在 Mac OS 上的 numbers 打開，與 wps 打開，完全正常

而在 windows 里的 excle 打開亂碼

感到非常的奇怪，看了網上很多方法，我知道是要加 BOM 頭，但是我試了這兩種辦法都不頂用，把 meta 頭里的編碼設置成 gb2312 還是無用。

new Blob(['\ufeff', `${titleText}\n${dataText}`], {type});

new Blob([`\ufeff${titleText}\n${dataText}`], {type});

更新，上面那個是 office 07 版的不知為何一直亂碼，而用 office 2020 最新版卻是正常