对象数组变成一维数组，导出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: [],
              },
            ],
          },
        ],

页面如下

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

参数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）：

需要把treeData换成上面的数组

去掉这个代码

<template>
  <div style="border: 1px solid rgb(23, 106, 150)">
    <div style="font-size: 16px; color: white; padding: 10px; background-color: rgb(23, 106, 150)">{{ title }}</div>
    <a-tree :treeData="treeData">
      <template #title="{ key: treeKey, title, dataRef }">
        <a-dropdown :trigger="['contextmenu']">
          <span>{{ title }}</span>
          <template #overlay>
            <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
              <a-menu-item key="1" @click="exportTXT(dataRef)">导出TXT</a-menu-item>
              <a-menu-item key="2" @click="exportTXT(dataRef)">导出PDF</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </template>
    </a-tree>
  </div>
</template>

<script>
  import { onMounted, reactive, toRefs } from 'vue';
  // import { saveAs } from 'file-saver';
  // import { exportJsonToExcel } from '@/vendors/Export2Excel.js';
  // import { writeFile } from 'fs-extra';
  export default {
    name: 'Index',
    props: ['title', 'treeData'],
    setup(props) {
      const data = reactive({
        treeData: props.treeData,
      });
      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.children))));
      }
      function handleSelect(val) {
        console.log('handleSelect', val);
      }
      function getRightMenuList(val) {
        console.log('getRightMenuList', val);
      }
      function exportPDF(val) {
        console.log('exportPDF', val);
      }
      function onContextMenuClick(treeKey, menuKey) {
        console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
      }
      return {
        ...toRefs(data),
        getRightMenuList,
        handleSelect,
        exportTXT,
        exportPDF,
        onContextMenuClick,
        // exportToExcel,
        // flatten,
      };
    },
  };
</script>

<style scoped></style>