javaScript实现 树形JSON格式数据 导出 Excel表格

javaScript实现 树形JSON格式数据 导出 Excel表格

  1. 实现效果,将多级JSON树形结构导出为Excel表格,效果如下:

json树状结构

Excel表格
2.新建一个 jsonToExcel.js,安装 xlsx 库,得到如下目录结构

//安装xlsx
yarn add xlsx

目录结构
3.实现导出为Excel表格,代码有注释并有打印运行得到的数据格式,代码如下:

// javaScript实现 树形JSON格式数据 导出 Excel表格

// 引入
let XLSX = require("xlsx");

// 普通JSON 格式数据
let data = [
  { id: "100000", code: "100000", type: "1", value: "粮食生产", parentId: "0" },
  {
    id: "100600",
    code: "100600",
    type: "2",
    value: "其他粮食生产",
    parentId: "100000",
  },
  {
    id: "fdc16bc5f83b4a94aa97d4681510b74e",
    code: "100601",
    type: "3",
    value: "其他粮食生产其他产品",
    parentId: "100600",
  },
  {
    id: "120000",
    code: "120000",
    type: "1",
    value: "畜牧业生产",
    parentId: "0",
  },
  {
    id: "120400",
    code: "120400",
    type: "2",
    value: "水产养殖",
    parentId: "120000",
  },
  {
    id: "120404",
    code: "120404",
    type: "3",
    value: "爬行类(龟、鳖)",
    parentId: "120400",
  },
  {
    id: "12040401",
    code: "12040401",
    type: "4",
    value: "小爬行类其他",
    parentId: "120404",
  },
];

// 普通JSON 数据 根据parentId 转 树形结构 数据
function arrayToTree(arr, parentId) {
  return arr.reduce((res, item) => {
    if (item["parentId"] == parentId) {
      item.children = arrayToTree(arr, item["code"]);
      return res.concat({ ...item, name: item.value, id: item.code });
    }
    return res;
  }, []);
}

// 得到树形数据
let treeData = arrayToTree(data, "0");
// console.log(JSON.stringify(treeData));
// [
//   {
//     id: "100000",
//     code: "100000",
//     type: "1",
//     value: "粮食生产",
//     parentId: "0",
//     children: [
//       {
//         id: "100600",
//         code: "100600",
//         type: "2",
//         value: "其他粮食生产",
//         parentId: "100000",
//         children: [
//           {
//             id: "100601",
//             code: "100601",
//             type: "3",
//             value: "其他粮食生产其他产品",
//             parentId: "100600",
//             children: [],
//             name: "其他粮食生产其他产品",
//           },
//         ],
//         name: "其他粮食生产",
//       },
//     ],
//     name: "粮食生产",
//   },
//   {
//     id: "120000",
//     code: "120000",
//     type: "1",
//     value: " 畜牧业生产",
//     parentId: "0",
//     children: [
//       {
//         id: "120400",
//         code: "120400",
//         type: "2",
//         value: "水产养殖",
//         parentId: "120000",
//         children: [
//           {
//             id: "120404",
//             code: "120404",
//             type: "3",
//             value: "爬行类(龟、鳖)",
//             parentId: "120400",
//             children: [
//               {
//                 id: "12040401",
//                 code: "12040401",
//                 type: "4",
//                 value: "小爬行类其他",
//                 parentId: "120404",
//               },
//             ],
//             name: "爬行类(龟、鳖)",
//           },
//         ],
//         name: "水产养殖",
//       },
//     ],
//     name: "畜牧业生产",
//   },
// ];

//树形结构数据 转为每一行的数据(二维数组)
function parseTreeToRow(list, data = [], row = []) {
  if (Array.isArray(list)) {
    list.forEach((node) => {
      if (node.type == 1) {
        row = [{ value: node.value }];
      }
      if (!node.children || node.children.length == 0) {
        data.push(row);
      } else {
        node.children.forEach((nodeChild) => {
          parseTreeToRow(node.children, data, [
            ...row,
            { value: nodeChild.value },
          ]);
        });
      }
    });
  }
  return data;
}

let rowData = parseTreeToRow(treeData);

// console.log(JSON.stringify(rowData));

// [
//   [
//     { value: "粮食生产" },
//     { value: "其他粮食生产" },
//     { value: "其他粮食生产其他产品" },
//   ],
//   [
//     { value: "畜牧业生产" },
//     { value: "水产养殖" },
//     { value: "爬 行类(龟、鳖)" },
//     { value: "小爬行类其他" },
//   ],
// ];
// 行数据(二维数组)数据转为普通 一维数组格式
function toArray(data) {
  let res = data.map((item) => {
    let child = {};
    item.forEach((childItem, index) => {
      child[index + 1 + "级分类"] = childItem.value;
    });

    return child;
  });
  return res;
}

let arr = toArray(rowData);
// console.log(JSON.stringify(arr));

// // 最后JSON 数据格式数据
// [
//   {
//     "1级分类": "粮食生产",
//     "2级分类": "其他粮食生产",
//     "3级分类": "其他粮食生产其他产品",
//   },
//   {
//     "1级分类": "畜牧业生产",
//     "2级分类": "水产养殖",
//     "3级分类": "爬行类(龟、鳖)",
//     "4级分类": "小爬行类其他",
//   },
// ];
// // 创建工作簿
const workbook = XLSX.utils.book_new();
//得到行数据(二维数组)数据转为普通 一维数组格式后 创建工作表
const worksheet = XLSX.utils.json_to_sheet(arr);
// 将工作表添加到工作簿中
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
// 导出 Excel 文件 即可在当前目录得到 data.xlsx
XLSX.writeFile(workbook, "data.xlsx");

  1. 最后,使用node,执行 jsonToExcel.js 即可在当前目录得到data.xlsx 文件

执行 jsonToExcel.js

node ./jsonToExcel.js
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页数据导出Excel表格,是一种非常常见的操作,其可以实现将网页上的数据直接导出Excel表格中,以方便用户对数据进行分析、整理、存档等操作。这种方法比较简单、易用,且涉及到的技术也不算难,基本上所有的网站都可以实现这一功能。下面我们来详细讲述一下该功能的实现过程及其相关技术要点。 首先,网页数据导出Excel表格主要涉及到两方面的技术:一是服务器端与客户端之间的数据传输技术;二是将传输过来的数据处理成Excel格式的技术。 在客户端点击导出按钮后,会向服务器发起一个数据请求,服务器端会将需要导出数据数据库或其他数据源中查询出来,并通过一定的数据传输技术将数据传输给客户端。常用的数据传输协议有两种:一种是XMLHttpRequest(即AJAX)协议,它可以通过JavaScript代码实现异步传输数据,不需要页面的刷新或跳转,很适合于提高用户体验;另一种是常见的HTTP请求,它是一种同步的数据传输方式,需要通过页面的刷新或跳转来实现数据的传输,但它的编写和调试比异步传输方式简单许多。 在数据传输完成后,服务器端需要将传输过来的数据使用一定的技术处理,将数据处理成Excel格式。目前,常用的Excel处理技术有两种:一种是使用Microsoft Office COM技术来实现定制化的Excel报表,这种技术需要先安装Office软件包或使用web-based COM automation技术,然后利用JavaScript或其他脚本语言实现数据Excel表格之间的交互,并将数据填充到表格中;另一种是使用Apache POI项目来处理Excel表格,这是一个完全开源的Java库,可以直接在Java中使用,其优点是极其便捷且具有很高的可移植性。 总之,将网页数据导出Excel表格可以方便用户对数据进行分析与整理,给用户带来很大的便利。在实现这一功能时,我们需要注意选择合适的数据传输协议和Excel处理技术,并严格遵守各项安全规定以保障数据安全。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值