[英]HTML to Excel: Data format changes
我有以下代码可以将 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)
使用 XLSX 库检查此解决方案。 此外,除了日期格式之外,它还对数字进行了四舍五入。 此解决方案修复了这两个问题。
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>
代码:
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');
}
}
这是我用来将 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>
这可能不是您想要的,但我有一个 Web 应用程序,可以在格式良好的表格中显示数据,如果他们想要在 excel 中显示数据,我只需将完全相同的数据写入新页面,但将标题更改为 mime 类型excel 并且效果很好! 获取格式、颜色等。很好地显示标题。 只是一个想法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.