对象数组变成一维数组,导出txt文件

假设对象数组格式为此

arr1: [
          {
            id: 1,
            title: '我是1目录',
            children: [
              {
                id: 11,
                title: '我是1-1目录',
                children: [
                  {
                    id: 111,
                    title: '我是1-1-1目录',
                    children: [],
                  },
                ],
              },
            ],
          },
          {
            id: 2,
            title: '我是2目录',
            children: [
              {
                id: 21,
                title: '我是2-1目录',
                children: [],
              },
            ],
          },
        ],

页面如下

对象数组变成一维数组,导出txt文件_第1张图片

先在页面上添加按钮点击事件,事件函数如下

参数dataRef就是对象数组的格式

function exportTXT(dataRef) {
        let arrayChildren = [];
        arrayChildren.push(dataRef);
        let dimenData = flatten(arrayChildren);
        let fileData = [];
        dimenData.map((item) => {
          fileData.push(item.title);
        });
        const fileName = '导出文件.txt';
        const csvContent = fileData.map((row) => `${row}`).join('\n');
        const blob = new Blob([csvContent], { type: 'text/csv' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
      }
      function flatten(arr) {
        return [].concat(...arr.map((item) => [].concat(item, ...flatten(item.subitems))));
      }

结果:

对象数组变成一维数组,导出txt文件_第2张图片

详细代码如下(功能是展示树结构的目录 右键导出txt):

需要把treeData换成上面的数组

对象数组变成一维数组,导出txt文件_第3张图片

去掉这个代码





你可能感兴趣的:(前端,javascript,html)