最简单的JS实现json转csv的方法

作者:代码拾荒时间:2026-10-22 20:12:33浏览:605

本文介绍了一种使用纯JavaScript将JSON数据转换为CSV格式的方法。通过遍历JSON对象并拼接字符串,生成符合CSV规范的文本内容,最终利用window.open打开包含CSV数据的Data URI。该方法无需依赖后端服务或第三方库,适合前端直接处理数据导出需求,兼顾了操作的便捷性与数据的安全性。

JSON转CSV的前端实现思路

在实际工作中,经常需要处理各类数据同步或初始化任务。目前,JSON是主流的数据交互格式,但服务器返回的JSON数据若直接提供给业务人员查看,往往不够直观。此时,将其转换为CSV文件,可以方便地通过Excel等工具进行读写操作。此外,转换为CSV后,数据更容易同步至数据库,具有较高的实用价值。尽管市面上已有许多现成的软件功能,但网络上的多数代码实现较为复杂。虽然存在不少在线转换工具,但出于数据安全考虑,建议避免将敏感数据上传至不可信的网站,以防数据泄露带来风险。这里提供一种较为简洁的实现方式,供读者参考使用:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>JSON to CSV</title>
  
  <script type="text/javascript">
  var json3 = { "d": "[{\"Id\":1,\"UserName\":\"Sam Smith\"},{\"Id\":2,\"UserName\":\"Fred Frankly\"},{\"Id\":1,\"UserName\":\"Zachary Zupers\"}]" }

  //var winners = '{}';
  var winnerObject = JSON.parse(json3);
  
  downloadJSON2CSV(winnerObject);

  function downloadJSON2CSV(objArray)
  {
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;

    var str = '';

    for (var i = 0; i < array.length; i++) {
      var line = '';

      for (var index in array[i]) {
        line += array[i][index] + ',';
      }

      // 添加双引号
      // for (var index in array[i]) {
      //  line += '"' + array[i][index] + '",';
      // }

      line.slice(0,line.Length-1); 

      str += line + '\r';
    }
    window.open( "data:text/csv;charset=utf-8," + str)
  }

  </script>

</head>
<body>
  <h1>This page onvert json to csv...</h1>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

作者最新文章