Format the output of excel download data in angular datatable

I'm trying to download the data in the angular datatable. The download does work but I'm stuck in a situation where I have an array of data for a column and I'm only showing the first index data, the rest I'm showing it with an button icon with the remaining number of elements in that array. I have included a picture for a better understanding.

When i download I get the the number in the button icon instead of the data. How to resolve this?

Below is the code

plotSupportFunctionDatatable() {
  let self = this;
  this.dtOptions = {
    autoWidth: false,
    scrollX: true,
    pageLength: 10,
    data: this.masterToolTableData,
    order: [[6, "desc"]],
    columns: [
      {
        title: 'Id',
        data: 'id',
      },
      {
        title: 'Support Function Name',
        data: 'support_function_name',
        className: 'support-width standards_description',
        "render": function (flag, a, r) {
          let tooltip = `<span class="tooltiptext" title="${flag}">${flag}</span>`
          return tooltip;
        }
      },
      {
        title: 'Location',
        data: 'location',
      },
      {
        title: 'Building',
        data: 'building',
        className: 'standards_description',
        "render": function (flag, a, r) {
          let tooltip = `<span class="tooltiptext" title="${flag}">${flag}</span>`
          return tooltip;
        }
      },
      {
        title: 'Employee',
        data: 'emp_list',
        className: "email_field",
        "render": function (flag, a, r) {
          let hide_class = ""
          let hide_class_empty = ""
          if (flag && (flag.length - 1 === 0 || flag.length === 0)) {
            hide_class = "d-none"
          }

          if (flag && flag.length === 0) {
            hide_class_empty = "d-none"
          }

          let email;
          if(flag && flag.length){
            email = `<span class ="${hide_class_empty}">${flag[0]}</span>&nbsp;&nbsp;<span title = "${flag.slice(1)}" class ="count_item ${hide_class}">+${flag.length - 1}</span></span>`
            return email;
          }else{
            return '';
          }
   
        }
      },
      {
        title: 'Description',
        data: 'description',
        className: 'standards_description',
        "render": function (flag, a, r) {
          let tooltip = `<span class="tooltiptext" title="${flag}">${flag}</span>`
          return tooltip;
        }
      },
      {
        title: 'Updated At',
        data: 'updated_at',
      },
      {
        title: 'Action',
        className: 'text-center',
        width: '80px',
        "render": function (flag, a, r) {
          let edit_disabled = '',
            delete_disabled = '';

          let btn = `<button class="btn btn-edit btn-action" ${edit_disabled} title="Edit">
                    <img src="../../../assets/images/noun_edit_1383914.svg">
                  </button>`
          return btn;
        }
      }],
      columnDefs: [
  
        {
          targets: [0,5,6],
          visible: false
        }
        ],
        dom: 'Bfrtip',
        buttons: [{
          extend: 'excel',
          text: 'Excel',
          footer: true,
          exportOptions: {
            columns: [1,2,3,4],
          },
          title:'SupportFunction List'
        }],

    // Function for inline click
    rowCallback: (row: Node, data: any[] | Object, index: number) => {
      const self = this;
      $('td button.btn-edit', row).unbind('click');
      $('td button.btn-edit', row).bind('click', () => {
        this.rowData = data
        this.displayDataToEdit(data);
      });

      
    $('td  button.btn-delete', row).unbind('click');
    $('td  button.btn-delete', row).bind('click', () => {
      self.deleteHandler(data);
    });

      return row;
    }
  };
}