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 最新版却是正常

posted @ 2020-06-24 15:42  Ever-Lose  阅读(145)  评论(8编辑  收藏