HTML 到 Excel：数据格式更改

Question

我有以下代码可以将 HTML 表格导出到 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();
}

导出有效，但 Excel 在某些情况下会更改日期。而不是 DD/MM/YYYY 它更改为 MM/DD/YYYY。

例如：在 HTML 中，日期是 29/05/2014 (DD/MM/YYYY)，在 Excel 中，日期是 29/05/2014 (DD/MM/YYYY)。在 HTML 中，日期是 02/07/2014 (DD/MM/YYYY) 在 Excel 中，日期是 07/02/2014 (MM/DD/YYYY)，最后一种情况是错误的。

试图格式化 javascript 日期但没有幸运：

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

尝试使用 NumberFormat 没有运气：

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

尝试使用TD中的样式没有幸运：

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

更新：

添加（作为测试）：

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

在第二个for 中，实际上是格式化日期。正如我所看到的，在这一点上日期已经是错误的了。我的意思是，在表格中显示 07/11/2014 (dd/mm/yyyy)，在导出中显示 11/07/2014 (mm/dd/yyyy)

Answer 1

Check this solution using XLSX library. 除了日期格式外，它还对数字进行四舍五入。此解决方案解决了这两个问题。

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 代码：

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

这可能不是您想要的，但我有一个 Web 应用程序，它可以在格式良好的表格中显示数据，如果他们想要在 excel 中显示数据，我只需将完全相同的数据写入新页面，但更改标题模仿类型的excel，它工作得很好！获取格式、颜色等。很好地显示标题。只是一个想法。

Answer 3

这是我用来将 HTML 表格转换为 CSV 和 excel 的不同方法。它独立于平台，即在 ActiveXObject 不可用时也可以使用。

您的表格代码应具有以下结构。请注意，它只是将类名作为列表分配给 Excel 文件中所需的行。

$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>