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