// 定义必须参数并赋予测试数据
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文件