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对象