EXCEL file export need repairing in IE11

jb181991

Hello sir, I just wanna ask why this error appears in IE11 and what's the possible solutions am I going to use.
I have a screenshot provided of what is the error. I already searched for the possible solutions in you site and I also tried to use 'excel','excelFlash', 'excelHtml5' but all of them got this error when I download and open the file.
Then this is the my code for now:

  $('#premium_stmt_tbl').dataTable({
      "bDestroy": true,
      "aaSorting": [],
      "iDisplayLength": 20,
      "aLengthMenu": [[20, 40, 60, 80, 100, -1], [20, 40, 60, 80, 100, "All"]],
      "scrollX": true,
      "responsive": true,
      "processing": true,
      "oLanguage": {
        "sSearch": '<div class="input-group">_INPUT_<span class="input-group-addon"><i class="fa fa-search"></i></span></div>',
        "sSearchPlaceholder": "Search...",
        "sProcessing":"Loading Policies..."
      },
      dom: 'B<"col-sm-6"l><"col-sm-6"f>rtip',
      buttons: [
          { extend: 'excel', footer: true },
          { extend: 'pdfHtml5',
            footer: true,
            orientation: 'landscape',
            pageSize: 'LEGAL',
            exportOptions: {
              columns: [0,1,2,3,4,5,6,7,8,9],

            }
          }
      ],
      "columns" : [
            { "width": "100px"},
            { "width": "60px"},
            { "width": "110px"},
            { "width": "110px"},
            { "width": "150px"},
            { "width": "90px", className: "text-center"},
            { "width": "100px", className: "text-center"},
            { "width": "50px", className: "text-right"},
            { "width": "50px", className: "text-right"},
            { "width": "60px", className: "text-right"},
            { "width": "10px"}
      ],
      "footerCallback": function ( row, data, start, end, display ) {
          var api = this.api(), data;

          // Remove the formatting to get integer data for summation
          var intVal = function ( i ) {
              return typeof i === 'string' ?
                  i.replace(/[\$,]/g, '')*1 :
                  typeof i === 'number' ?
                      i : 0;
          };

          // Update footer
          $( api.column( 6 ).footer() ).html(
              '<strong>Total:</strong>'
          );

          // Total over this page
          billedTotal = api
              .column( 7, { page: 'current'} )
              .data()
              .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
              }, 0 );

          // Update footer
          $( api.column( 7 ).footer() ).html('<strong>$'+billedTotal.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+'</strong>');

          cancelledTotal = api
              .column( 8, { page: 'current'} )
              .data()
              .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
              }, 0 );

          // Update footer
          $( api.column( 8 ).footer() ).html('<strong>$'+cancelledTotal.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+'</strong>');

          netdueTotal = api
              .column( 9, { page: 'current'} )
              .data()
              .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
              }, 0 );

          // Update footer
          $( api.column( 9 ).footer() ).html('<strong>$'+netdueTotal.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+'</strong>');
      },
      "serverSide": true,
      "ajax": {
        url : url+"premium-production-list",
        type: 'POST',
        dataFilter: function(data){
          var json = jQuery.parseJSON( data );
          json.recordsTotal = json.recordsFiltered;
          json.recordsFiltered = json.recordsFiltered;
          json.data = json.data;
          return JSON.stringify( json ); // return JSON string
        }
      }
  });

I also use Server-side processing..
Just to be clear, this error only prompts when I open the exported file.
Please guide me on this. Thanks.

allan

Can you link to a test case showing the issue please?

Allan

HPB

@allan
The basic example has this issue.

You introduced a header with merged cells in buttons 1.4.0, but it is implemented in a way that doesn't work in IE. It breaks when you want to use certain jquery functions on a xml-document child element. One of those is append().
This is the function that breaks it (starts on line 1122):

        var mergeCells = function ( row, colspan ) {
            var mergeCells = $('mergeCells', rels);

            mergeCells.append( '<mergeCell ref="A'+row+':'+createCellPos(colspan)+row+'" />' );
            mergeCells.attr( 'count', mergeCells.attr( 'count' )+1 );
            $('row:eq('+(row-1)+') c', rels).attr( 's', '51' ); // centre
        };

The count attribute gets updated, but the mergeCell child never gets added. Excel will throw an error because it expects 1 mergeCell item, but there is none.

Instead of using append() you could create them with createElementNS and add them with appendChild as I demonstrated in a previous discussion:
https://datatables.net/forums/discussion/41698/ie-append-doesnt-work-in-excel-customize

allan

Thanks! Fix committed here.

Allan

lorein0688

edited by Allan Removed as spam. This thread was marked as fixed months ago. Please correct me if I am wrong though.

Manoj542

@allan,

I am using Buttons version 1.5.2 but still not able to export to Excel in IE 11. Can you please help me out here pls..

Manoj

allan

Please see this thread which discusses this latest issue.

Allan