json与xlsx之间的相互转换

最新推荐文章于 2025-02-14 19:01:19 发布

裘乡

最新推荐文章于 2025-02-14 19:01:19 发布

阅读量685

点赞数

文章标签： json 前端

本文链接：https://blog.youkuaiyun.com/QiuXiang_/article/details/132404707

版权

在项目中有时候会出现对一些数据进行导出导入的需求，这时候就需要考虑怎么对json或xlsx进行转换，所以这里记录一种非常简单的转换方式：

基于的三方

  <script src="https://cdn.jsdelivr.net/npm/xlsx@0.17.0/dist/xlsx.full.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>

假定json和xlsx的类型格式

[
  {
    "bizFlag": "web.medical.desc.login",
    "key": "Send",
    "en": "Send",
    "tr": "Gönder",
    "zh": "发送"
  }
]

json 转换为 xlsx

<!DOCTYPE html>
<html>
<head>
  <title>JSON to XLSX</title>
  <script src="https://cdn.jsdelivr.net/npm/xlsx@0.17.0/dist/xlsx.full.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
</head>
<body>
<input type="file" id="fileInput">
<button onclick="handleClick()">导出为XLSX文件</button>
<script>
  function handleClick() {
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0];
    var reader = new FileReader();
    reader.onload = function(event) {
      var data = event.target.result;
      var jsonData = JSON.parse(data);
      var sheetData = jsonData.map(function(item) {
        return {
          "bizFlag": item.bizFlag,
          "key": item.key,
          "en": item.en,
          "tr": item.tr,
          "zh": item.zh
        };
      });
      var wb = XLSX.utils.book_new();
      var ws = XLSX.utils.json_to_sheet(sheetData);
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      var wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
      var blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
      saveAs(blob, 'data.xlsx');
    };
    reader.readAsText(file);
  }

  function s2ab(s) {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i < s.length; i++) {
      view[i] = s.charCodeAt(i) & 0xFF;
    }
    return buf;
  }
</script>
</body>
</html>

XLSX.utils.json_to_sheet(sheetData)中的sheetData的设定就是对xlsx的表格设定，他会自动将你的数据按照设定进行排列

xlsx 转换为 json

<!DOCTYPE html>
<html>
<head>
  <title>XLSX to JSON</title>
  <script src="https://cdn.jsdelivr.net/npm/xlsx@0.17.0/dist/xlsx.full.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
</head>
<body>
<input type="file" id="fileInput">
<button onclick="handleClick()">导入XLSX文件并转换为JSON</button>
<script>
  function handleClick() {
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0];
    var reader = new FileReader();
    reader.onload = function(event) {
      var data = event.target.result;
      var wb = XLSX.read(data, { type: 'binary' });
      var jsonData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
      console.log(jsonData);
    };
    reader.readAsBinaryString(file);
  }
</script>
</body>
</html>