Как добавить дополнительные данные из массива для экспорта в Excel в таблице данных jquery

Question

У меня есть jquery datatable с столбцами и данными ниже.

Я использую встроенные функции для экспорта данных в Excel, и они работают должным образом.

 var table = $('#example').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5'
                ],
                stateSave: true,
                
                
               
                rowsGroup: [// Always the array (!) of the column-selectors in specified order to which rows groupping is applied
                    // (column-selector could be any of specified in https://datatables.net/reference/type/column-selector)

                    1, 0
                ]
               
            });

Теперь у меня есть массив с данными, подобными определению сетки.

 var aData = new Array();
            var array1 = {

                Name: "David",
                Position: "Software Engineer",
                Office: "Tokyo",
                OfficeId: "1000",
                Age: 29,
                "Start date": "2011/04/25",
                Salary: "$320,800"
            };
            aData.push(array1);
            

Требуется добавить данные массива в Excel при нажатии кнопки Excel. т. е. включить данные из внешнего массива в значение сетки при экспорте. Это возможно? Excel shou ld будет таким, как показано ниже.

Любая помощь будет принята с благодарностью. Заранее спасибо.

Answer 1

У меня есть разрешение для этого, и я делюсь здесь.

Мы можем использовать нижеприведенное, чтобы добавить пользовательские данные в jquery datatable при экспорте данных.

  customizeData: function (data) {
  
  }

Здесь вы получите заголовок в «data.header», а данные ячеек будут доступны в «data.body».

Итак, мы можем манипулировать здесь все данные заголовка / ячейки Excel.

Я создал собственный массив для данных ячеек и ответил, как показано ниже, в "data.body"

customize: function (xlsx) {


                    },
customizeData: function (data) {
                        
     var excelbodyData = getBodyArray();
    var excelHeader =getHeaderArray();
     data.header = [];
     data.header = excelHeader;
     data.body = [];
      data.body = excelbodyData;
  }

Answer 2

Вот код, который показывает, как этого можно достичь:

Предположим следующую отправную точку:

И следующая «дополнительная» строка данных в переменной массива JavaScript:

var extraData = [
  "David",
  "Software Engineer 2",
  "Tokyo",
  25,
  "04/25/2011",
  320800
];

Затем, когда данные экспортируются в Excel, таблица выглядит следующим образом:

Код DataTables:

<script type="text/javascript">

$(document).ready(function() {

  var extraData = [
    "David",
    "Software Engineer",
    "Tokyo",
    29,
    "04/25/2011",
    320800
  ];

  var table = $('#example').dataTable({
    dom: 'Bfrtip',
    buttons: [
      {
        extend: 'excelHtml5',
        title: '', // no title row
        text: 'Excel',
        customize: function ( xlsx ){
          var sheet = xlsx.xl.worksheets['sheet1.xml'];
          insertRowAfter( 6, sheet );
          populateRow( 7, extraData, sheet );
        }
      }
    ]

  });

  // Insert a new row after the rowNum row. The new row is 
  // cloned from the rowNum row.
  function insertRowAfter(rowNum, sheet) {
    var $src_row = $( 'row[r=' + rowNum + ']', sheet );
    var newRowID = parseInt( $src_row.attr( 'r' ) ) + 1;
    var $new_row = $src_row.clone().attr( 'r', newRowID );

    // fix the cell references in the new row:
    $new_row.children( 'c' ).each(function( index ) {
      var newCellID = $( this ).attr( 'r' ).match(/[A-Z]+/) + newRowID
      $( this ).attr( 'r', newCellID );
    });

    // Increment the row and cell references in all rows below
    // where the new row will be inserted:
    $src_row.nextAll('row').each(function( index ) {
      var nextRowID = parseInt( $( this ).attr( 'r' )) + 1;
      $( this ).attr( 'r', nextRowID );
      $( this ).children( 'c' ).each(function( index ) {
        var nextCellID = $( this ).attr( 'r' ).match(/[A-Z]+/) + nextRowID
        $( this ).attr( 'r', nextCellID );
      });

    });

    // Insert the new row:
    $src_row.after($new_row);
  }

  function populateRow( row, data, sheet ) {
    // Assumes data starts in column A, with no gaps. Assumes 
    // no more than 26 columns (A through Z).
    data.forEach(function (item, index) {
      var col = String.fromCharCode(65 + index); // 65 = ascii 'A'
      if ( typeof item === 'string' ) {
        $('c[r=' + col + row + '] t', sheet).text( item );
      } else if ( typeof item === 'number' ) {
        $('c[r=' + col + row + '] > v', sheet).html( item );
      }
    });
  }

});
</script>

На заметку:

1) Я изменил ваш JS {...} объект для данных «дополнительной строки» в массив [...]. Вы можете изменить код и вернуть его, если хотите, но для моей демонстрации я хотел, чтобы он был простым.

2) Данные в массиве «дополнительных строк» ​​должны быть отформатированы в специальном формате c - я имею в виду: для чисел убедитесь, что данные указаны , а не в кавычках. И, например, сумма в долларах не с форматированием запятыми или знаками доллара. Позвольте Excel выполнить форматирование за вас.

3) Этот код несколько базовый c, а листы Excel довольно сложны. Для конкретного сценария c в вашем вопросе это работает. Но вполне возможно, что код потребуется настроить для обработки других типов данных - или пустых / пустых значений и так далее. Просто чтобы вас предупредить.

Я бы сказал, сделайте все возможное, чтобы избежать необходимости вставлять новые строки, подобные этой. Или используйте библиотеку, которая, вероятно, лучше оснащена для этого.

Edit

Предполагая, что мы начинаем с объекта {...} вместо массива [...]:

  var dataObject = {
    Name: "David",
    Position: "Software Engineer",
    Office: "Tokyo",
    Age: 29,
    "Start date": "2011/04/25",
    Salary: 320800
  };

Есть разные способы справиться с этим.

Вот один из способов преобразования данных в массив перед его использованием:

var extraData = [];
for(var o in dataObject) {
  extraData.push(dataObject[o]);
}

Теперь мы можем использовать extraData так же, как показано выше.