代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>将 JSON 数据导出为 CSV 文件</title>
</head>
<body><button id="exportBtn">导出为 CSV</button><script>document.getElementById('exportBtn').addEventListener('click', function() {// 假设这是你的 JSON 数据var jsonData = [{ name: 'John', age: 30, city: 'New York' },{ name: 'Alice', age: 25, city: 'Los Angeles' },{ name: 'Bob', age: 35, city: 'Chicago' }];// 构建 CSV 数据var csvData = '';var header = Object.keys(jsonData[0]).join(',') + '\n';csvData += header;jsonData.forEach(function(item) {var row = Object.values(item).join(',') + '\n';csvData += row;});// 创建并下载 CSV 文件var blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });if (navigator.msSaveBlob) { // IE 10+navigator.msSaveBlob(blob, 'data.csv');} else {var link = document.createElement('a');if (link.download !== undefined) {var url = URL.createObjectURL(blob);link.setAttribute('href', url);link.setAttribute('download', 'data.csv');link.style.visibility = 'hidden';document.body.appendChild(link);link.click();document.body.removeChild(link);}}});
</script></body>
</html>
代码运行结果
拓展知识
前端如何生成二进制文件——Blob对象
填坑:前端导出csv文件
csv原理
使用JavaScript 将Json数据导出CSV文件
