[英]HTML to Excel: Data format changes
I have the following code to export HTML tables to Excel:我有以下代码可以将 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();
}
The export works but Excel is changing the dates in some cases.导出有效,但 Excel 在某些情况下会更改日期。 Instead of DD/MM/YYYY it changes to MM/DD/YYYY.
它不是 DD/MM/YYYY,而是 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).
例如:在 HTML 中日期是 29/05/2014 (DD/MM/YYYY),在 Excel 中日期是 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.
在 HTML 中,日期是 02/07/2014 (DD/MM/YYYY) 在 Excel 中,日期是 07/02/2014 (MM/DD/YYYY),最后一种情况是错误的。
Tried to format the javascript date without lucky to:试图格式化 javascript 日期,但不幸的是:
var now = new Date();
now.format("dd/mm/yyyy");
Tried to use NumberFormat without lucky:没有幸运地尝试使用 NumberFormat:
oExcel.Cells(y+1,x+1).NumberFormat = "DD/MM/YYYY";
Tried to use the style in the TD without lucky:尝试在 TD 中使用该样式但不走运:
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.在第二个
for
,实际格式化日期。 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)
我的意思是,在表格中显示 07/11/2014 (dd/mm/yyyy),在导出中显示 11/07/2014 (mm/dd/yyyy)
Check this solution using XLSX library. 使用 XLSX 库检查此解决方案。 Also apart from date format, it also roundoffs the number.
此外,除了日期格式之外,它还对数字进行了四舍五入。 These 2 issues are fixed by this solution.
此解决方案修复了这两个问题。
HTML: 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');
}
}
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.这是我用来将 HTML 表转换为 CSV 和 excel 的不同方法。它独立于平台,即在 ActiveXObject 不可用时也能工作。
Your table code should have following structure.您的表代码应具有以下结构。 Note that it just assigns class name as list to rows which you want in Excel file.
请注意,它只是将类名作为列表分配给您想要在 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>
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!这可能不是您想要的,但我有一个 Web 应用程序,可以在格式良好的表格中显示数据,如果他们想要在 excel 中显示数据,我只需将完全相同的数据写入新页面,但将标题更改为 mime 类型excel 并且效果很好! Gets the formatting, color, etc. Displays headers nicely.
获取格式、颜色等。很好地显示标题。 Just a thought.
只是一个想法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.