Json 转 csv 下载的 Js 实现方法 / Blob 导出 csv 出现中文乱码解决方案

Json 转 csv 并实现下载的 Js 实现方法封装 / Blob 导出 csv 时使用 excel 打开会出现中文乱码的解决方案(其实就是在 csv 数据前添加一个 ‘\ufeff’)如下:

这里使用 json 转 csv 直接使用 json2csv 这个非常方便好用的 npm 包,node 下直接执行 npm install json2csv 安装依赖包

import { Parser } from 'json2csv'
const data = [{ // 数据
  'aa': '数据 aa 1',
  'bb': '数据 bb 1',
  'cc': '数据 cc 1',
  'dd': '数据 dd 1',
},
{
  'aa': '数据 aa 2',
  'bb': '数据 bb 2',
  'cc': '数据 cc 2',
  'dd': '数据 dd 2',
}]
const fields = [{ // 中文标题
  label: 'aa 的标题',
  value: 'aa'
}, {
  label: 'bb 的标题',
  value: 'bb'
}, {
  label: 'cc 的标题',
  value: 'cc'
}, {
  label: 'dd 的标题',
  value: 'dd'
}]
const json2csvParser = new Parser({ fields })
const fixedData = '\ufeff' + json2csvParser.parse(data) // 【中文乱码的解决方案】Blob 导出 csv 时使用 excel 打开出现中文乱码的解决方案
const blob = new Blob([fixedData], { type: 'text/csv,charset=UTF-8', endings: 'native' })
const csvUrl = window.URL.createObjectURL(blob)
const downloadElement = document.createElement('a')
downloadElement.href = csvUrl
downloadElement.download = `数据_${String(new Date().valueOf())}.csv`
document.body.appendChild(downloadElement)
downloadElement.click() // 触发自动下载
document.body.removeChild(downloadElement) // 下载完成移除元素
window.URL.revokeObjectURL(csvUrl) // 释放掉blob对象