js保存数据为csv格式并导出

这篇文章的来由主要是为了实现在页面上加个按钮，获取数据后把这部分数据下载到本地，且格式要是csv的。
就直接上代码吧，具体逻辑参照代码注释。

// 定义必须参数并赋予测试数据
let data = [ // 真实数据需要与此测试数据格式保持一致。
	{name: '张三', url: 'https://www.baidu.com'},
	{name: 'zhangsan', url: 'https://www.baidu.com'},
	{name: 'zhangsan', url: 'https://www.baidu.com'},
	{name: 'zhangsan', 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文件并添加下载按钮
csvString = "data:application/csv," + 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',
	'top': '10px',
	'left': '10px',
	'zIndex': '9999999999',
	'backgroundColor': 'yellow' // 注意的是，样式名不能有下划线，要合并在一起改为首字母大写列如：  background-color  =>  backgroundColor
})
document.body.appendChild(btn)

点击这个a标签后，就会下载data数据为一个csv文件到本地了。

@快乐是一切