HTML to Excel: Data format changes

Question

I have the following code to export HTML tables to Excel:

function exportToExcel(tableID)
{
    var detailsTable= document.getElementById(tableID);
    var oExcel = new ActiveXObject("Excel.Application");
    var oBook = oExcel.Workbooks.Add;
    var oSheet = oBook.Worksheets(1);
    for (var y=0;y<detailsTable.rows.length;y++)
    {
        for (var x=0;x<detailsTable.rows(y).cells.length;x++)
        {
            oSheet.Cells(y+1,x+1)= detailsTable.rows(y).cells(x).innerText;
        }
    }

    oExcel.Visible = true;
    oExcel.UserControl = true;
    oExcel.Columns.AutoFit();
    oExcel.Rows.Autofit();
}

The export works but Excel is changing the dates in some cases. Instead of DD/MM/YYYY it changes to MM/DD/YYYY.

For example: In HTML the date is 29/05/2014 (DD/MM/YYYY), in Excel the date is 29/05/2014 (DD/MM/YYYY). In HTML the date is 02/07/2014 (DD/MM/YYYY) in Excel the date is 07/02/2014 (MM/DD/YYYY), this last case is wrong.

Tried to format the javascript date without lucky to:

var now = new Date();
now.format("dd/mm/yyyy");

Tried to use NumberFormat without lucky:

oExcel.Cells(y+1,x+1).NumberFormat = "DD/MM/YYYY"; 

Tried to use the style in the TD without lucky:

style="mso-number-format:"dd\/mm\/yyyy"

UPDATE:

Adding (as a test):

oSheet.Cells(y+1,x+1).NumberFormat = "[$-F800]dddd, mmmm dd, yyyy"

Inside the second for , actually format the date. As I can see the date is already wrong in this point. I mean, in the table it shows 07/11/2014 (dd/mm/yyyy) and in the export it shows 11/07/2014 (mm/dd/yyyy)

Answer 1

Check this solution using XLSX library. Also apart from date format, it also roundoffs the number. These 2 issues are fixed by this solution.

HTML:

<div class="container">
<table class="table " #table1>
<thead>
<tr>
<th>Name
<th>Dob(DD/MM/YYYY)
<th>Id
<th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of colors;index as i">
<td [style.color]="colors[i]">
{{item.name}}
</td>
<td t='s' [style.color]="colors[i]">//This t='s' solves the issue.
{{item.dob}}
</td>
<td t='s' [style.color]="colors[i]">
<!-- This is most important t='s' -->
{{item.id}}
</td>

</tr>
</tbody>
</table>
<button type="button" (click)="importTable2()">Export Table Two</button>
</div>

TS code:

import {
  Component,
  ViewChild,
  ElementRef
} from '@angular/core';
import * as XLSX from 'xlsx';

import {
  Observable
} from 'rxjs/Observable';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  @ViewChild('table') table: ElementRef;
  @ViewChild('table1') table1: ElementRef;


  colors = [{
      name: 'Rubecaa',
      dob: '11/10/1998',
      id: '1000100020202010101AB'
    },
    {
      name: 'Zena',
      dob: '17/11/1998',
      id: '10001000202020101010'
    } //Id is string but sometimes it may contains only  number.
  ];



  importTable2() {
    const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(this.table1.nativeElement);
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

    /* save to file */
    XLSX.writeFile(wb, 'Table2.xlsx');

  }
}

Answer 2

This is different approach I use to convert HTML tables to CSV and excel.Its a platform independent ie works also when ActiveXObject not available.

Your table code should have following structure. Note that it just assigns class name as list to rows which you want in Excel file.

$u("#btnXLS").click(function() {

  var xls = jQuery(".list").map(function(a, i) {
    return $u.trim($u(this).text()).split(/\s*\n\s*/).join("\t");
  }).toArray().join("\r\n");
  download(xls, "All_Data.xls", "application/vnd.ms-excel");

});

// download() function
function download(strData, strFileName, strMimeType) {
  var D = document,
    a = D.createElement("a");
  var Data = "Date :-" + Date();
  Data += "\n\n" + strData;
  strData = Data;
  strFileName = strFileName.substr(0, strFileName.indexOf('.'));
  strFileName += Date();
  if (strMimeType.indexOf("text/csv") >= 0)
    strFileName += ".csv";
  else
    strFileName += ".xls";
  strMimeType = strMimeType || "application/octet-stream";
  if (window.MSBlobBuilder) { //IE10+ routine
    var bb = new MSBlobBuilder();
    bb.append(strData);
    return navigator.msSaveBlob(bb, strFileName);
  } /* end if(window.MSBlobBuilder) */
  if ('download' in a) { //html5 A[download]
    if (!window.URL) {
      a.href = window.URL.createObjectURL(new Blob([strData]));

    } else {
      a.href = "data:" + strMimeType + "," + encodeURIComponent(strData);
    }

    a.setAttribute("download", strFileName);
    a.innerHTML = "downloading...";
    D.body.appendChild(a);
    setTimeout(function() {
      a.click();
      D.body.removeChild(a);
    }, 66);
    return true;
  } /* end if('download' in a) */
  //do iframe dataURL download (old ch+FF):
  var f = D.createElement("iframe");
  D.body.appendChild(f);
  f.src = "data:" + strMimeType + "," + encodeURIComponent(strData);

  setTimeout(function() {
    D.body.removeChild(f);
  }, 333);
  return true;
} /* end download() */

<table>
  <thead>
    <tr class="list">
      <th>Column Header</th>
      <th>Column Header</th>
      <th>Column Header</th>
    </tr>
  </thead>
  <tbody>

    <tr class="list">
      <td>11</td>
      <td style="background: #33cc00;">11</td>
      <td>22</td>
    </tr>

    <tr class="list odd">
      <td>22</td>
      <td style="background: #33cc00;">22</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

Answer 3

This may not be what you want, but I have a web application that displays data in a nicely formatted table, and if they want it in excel, I just write the exact same data to a new page, but change the headers to mime type excel and it works beautifully! Gets the formatting, color, etc. Displays headers nicely. Just a thought.