How can I export a complex json structure to Excel xlsx

Viewed 30

I'm trying export a json data to Excel using xlsx package in Angular 12. (I construct this data from a service, I don't extract from a table)

This is my mock data:

[
  {
    "Role": "Role 1",
    "Modules": [
      {
        "Name": "Module 1",
        "Permissions": {
          "Permission 1": [
            "Option 1",
            "Option 2",
            "Option 3"
          ],
          "Permission 2": [
            "Option 1",
            "Option 2",
            "Option 3"
          ],
          "Permission 3": [
            "Option 1",
            "Option 2",
            "Option 3"
          ]
        }
      },
      {
        "Name": "Module 2",
        "Permissions": {
          "Permission 1": [
            "Option 1",
            "Option 2",
            "Option 3"
          ],
          "Permission 2": [
            "Option 1",
            "Option 2",
            "Option 3"
          ],
          "Permission 3": [
            "Option 1",
            "Option 2",
            "Option 3"
          ]
        }
      }
    ]
  },
  {
    "Role": "Role 2",
    "Modules": [
      {
        "Name": "Module 1",
        "Permissions": {
          "Permission 1": [
            "Option 1",
            "Option 2",
            "Option 3"
          ],
          "Permission 2": [
            "Option 1",
            "Option 2",
            "Option 3"
          ],
          "Permission 3": [
            "Option 1",
            "Option 2",
            "Option 3"
          ]
        }
      }
    ]
  }
]

This is my .ts:

  EXCEL_TYPE = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
  EXCEL_EXTENSION = ".xlsx";

  constructor() {}

  exportAsExcelFile(jsonData: any[], excelFileName: string) {
    console.log('Data dentro del service:', jsonData);
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(jsonData);
    const workBook: XLSX.WorkBook = {
      Sheets: {
        'data': worksheet
      },
      SheetNames: ['data']
    };
    const excelBuffer: any = XLSX.write(workBook, { bookType: 'xlsx', type: 'array' });
    this.saveAsExcelFile(excelBuffer, excelFileName);
  }

  private saveAsExcelFile(arrayBuffer: any, fileName: string) {
    const data: Blob = new Blob([arrayBuffer], { type: this.EXCEL_TYPE });
    FileSaver.saveAs(data, fileName + this.EXCEL_EXTENSION);
  }

And this is my result: Export's result

Expected result: Expected result

I saw some examples but I don't found something exactly like my case or my data xd, I hope someone can help me :).

0 Answers
Related