原生js导出json为csv文件

// 定义必须参数并赋予测试数据
let data = [ // 真实数据需要与此测试数据格式保持一致。
	{name: '张三', url: 'https://www.baidu.com'},
	{name: '李四', url: 'https://www.baidu.com'},
	{name: '王五', url: 'https://www.baidu.com'},
	{name: '赵六', url: 'https://www.baidu.com'}
]
let header= {name: '姓名', url: '网址'}  // 表头

//数据处理， 这一部分可以封装为函数
data.unshift(header)  // 添加表头

// 处理数据为csv的格式
let csvString = ""
data.map(item => {
	Object.keys(header).map(key => {
		let value = item[key]
		csvString += value+','
	})
	csvString += '\r\n'
})


// 保存为csv文件并添加下载按钮 
//charset=utf-8,\ufeff + encodeURIComponent解决中文乱码
csvString = "data:application/csv;charset=utf-8,\ufeff" + encodeURIComponent(csvString)

//创建一个按钮
let btn = document.createElement('a');
btn.setAttribute("href", csvString);
btn.setAttribute("download", "data.csv");
btn.innerText = '下载'
// 定义一个修改元素样式的函数
function setStyle(dom, styles={}){
	Object.keys(styles).map(key => {
		dom.style[key] = styles[key]
	})
	return dom
}

// 设置按钮的样式
btn = setStyle(btn, {
	'position': 'fixed',
	'bottom': '20px',
	'right': '50px',
	'zIndex': '9999999999',
	'color':'white',
	'backgroundColor': 'red' // 注意的是，样式名不能有下划线，要合并在一起改为首字母大写列如：  background-color  =>  backgroundColor
})

document.body.appendChild(btn)

控制台运行代码会在页面右下角生成下载按钮，下载data.csv文件