如何从数组中添加其他数据以导出到 jquery 数据 table 中的 excel

Question

我的 jquery 数据表包含以下列和数据。

我正在使用内置功能将数据导出到 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 grouping 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: "0,800"
            };
            aData.push(array1);

要求是在点击excel按钮时，将数组数据添加到excel中。即，在导出时将外部数组中的数据包含到网格值中。这可能吗？ excel 应该如下所示。

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

下面是一些代码，展示了如何实现这一点：

假设以下起点：

以及 JavaScript 数组变量中的以下 "extra" 行数据：

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

然后当数据导出到Excel时，table看起来像这样：

数据表代码：

<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) 我将 "extra row" 数据的 JS {...} 对象更改为数组 [...]。如果您愿意，您可以更改代码并将其改回 - 但对于我的演示，我想保持简单。

2) "extra row" 数组中的数据必须以特定方式格式化 - 我的意思是：对于数字，确保数据是 而不是 在引号中。并且，例如，美元金额是 而不是 格式的任何逗号或美元符号。让 Excel 为您格式化。

3) 这段代码有些基础，Excel 工作表相当复杂。对于您问题中的特定场景，这可行。但很可能需要调整代码以处理其他类型的数据 - 或 empty/blank 值，等等。只是警告你。

我会说，尽你所能避免像这样插入新行。或者使用一个可能更适合处理这个问题的库。

编辑

假设我们从对象 {...} 而不是数组 [...]:

  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

Answer 2

我已经解决了这个问题，我在这里分享。

我们可以利用下面的方法在导出数据的同时将自定义数据添加到 jquery 数据表。

  customizeData: function (data) {
  
  }

在这里您将在“data.header”中获得 header，单元格数据将在 "data.body" 中可用。

因此，我们可以在此处操作整个 excel header/cell 数据。

我已经为单元格数据创建了自定义数组，并在 "data.body"

中进行了如下替换

customize: function (xlsx) {


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

如何从数组中添加其他数据以导出到 jquery 数据 table 中的 excel

How to add additional data from an array to export to excel in jquery data table

datatable

excel

jquery

datatables

export-to-excel