【发布时间】:2018-05-01 02:35:10
【问题描述】:
我花了很多时间在 stackoverflow 和其他互联网资源上寻找这个问题的答案。但我无法将解决方案转换为我当前的代码(这非常重要)。所以我有下面的代码:
var data_type = 'data:application/vnd.ms-excel/charset=UTF-8';
var tables_divs_sum_html = '<table border=1 ><tbody ><tr border=1 ><td border=1 >';
var table_divs = document.getElementsByClassName('calculate--container')
for (let i=0;i<table_divs.length;i++)
{
if (i === table_divs.length - 1)
{
tables_divs_sum_html += table_divs[i].outerHTML + '</td></tr></tbody></table>';
}
else
{
tables_divs_sum_html += table_divs[i].outerHTML + '</td><td>';
}
}
var table_html = tables_divs_sum_html.replace(/ /g, '%20');
var a = document.createElement('a');
a.href = data_type + ', ' + table_html
a.download = `Report_for_${this.props.match.params.month}_${this.props.match.params.year}` + '.xls';
a.click();
<div class="calculate--container">
<h5 style="color: skyblue;">
</h5>
<div class="calculate--table">
<table>
<tbody>
<tr>
<th style="border-top-color: skyblue; border-left-color: skyblue; border-right-color: skyblue; color: skyblue;">
<span>
<span>
July
</span>
2017
</span>
<span>
<br>
<span>
Equality period
</span>
(4)
</span>
</th>
<th colspan="3" style="border-top-color: whitesmoke; border-left-color: whitesmoke; border-right-color: whitesmoke;">
Laborable, de 6 AM a 6 PM
</th>
<th colspan="3" style="border-top-color: whitesmoke; border-left-color: whitesmoke; border-right-color: whitesmoke;">
Fin de semana, de 6 AM a 6 PM
</th>
</tr>
<tr>
<th>
Sensors
</th>
<th>
<span>
ATT
</span>
</th>
<th>
<span>
ATT SLA
</span>
</th>
<th>
<span>
ATT MI
</span>
</th>
<th>
<span>
ATT
</span>
</th>
<th>
<span>
ATT SLA
</span>
</th>
<th>
<span>
ATT MI
</span>
</th>
</tr>
<tr>
<td>
Salvador Orozco Loreto s/n
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
</tr>
<tr>
<td>
Chapala - Guadalajara & Oleoducto
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
</tr>
<tr>
<td>
Calz. Jesús González Gallo 655
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
</tr>
<tr>
<td>
Av. Niños Héroes 642
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
</tr>
<tr>
<td>
1006 - Niños Héroes 1092
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
</tr>
<tr>
<td>
Av San Rafael 403
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
</tr>
<tr>
<td>
Glorieta del Charro
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
</tr>
<tr>
<td>
1085 - Av del Chamizal 389-333
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
</tr>
<tr>
<td>
1004 - Felipe Angeles 391
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
</tr>
<tr>
<td>
1007 - Artesanos 1078
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
</tr>
<tr>
<td>
1007 - Artesanos 1078
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
<td style="background-color: white; color: black;">
-
</td>
</tr>
<tr>
<th>
<span>
Route
</span>
</th>
<th style="background-color: white; color: black;">
-
</th>
<th style="color: black;">
-
</th>
<th style="background-color: white; color: black;">
-
</th>
<th style="background-color: white; color: black;">
-
</th>
<th style="color: black;">
-
</th>
<th style="background-color: white; color: black;">
-
</th>
</tr>
<tr class="stupid-height">
</tr>
<tr>
<th style="border-top-color: whitesmoke; border-left-color: whitesmoke;">
<nbsp></nbsp>
</th>
<th>
<span>
AV
</span>
</th>
<th>
<span>
SLA
</span>
</th>
<th>
<span>
MI
</span>
</th>
<th>
<span>
AV
</span>
</th>
<th>
<span>
SLA
</span>
</th>
<th>
<span>
MI
</span>
</th>
</tr>
<tr>
<th>
<span>
Average pass frequency
</span>
</th>
<th style="background-color: white; color: black;">
-
</th>
<th style="color: black;">
-
</th>
<th style="background-color: white; color: black;">
-
</th>
<th style="background-color: white; color: black;">
-
</th>
<th style="color: black;">
-
</th>
<th style="background-color: white; color: black;">
-
</th>
</tr>
<tr>
<th>
<span>
Number of buses
</span>
</th>
<th style="background-color: white; color: black;">
-
</th>
<th style="color: black;">
-
</th>
<th style="background-color: white; color: black;">
-
</th>
<th style="background-color: white; color: black;">
-
</th>
<th style="color: black;">
-
</th>
<th style="background-color: white; color: black;">
-
</th>
</tr>
<tr class="stupid-height">
</tr>
</tbody>
</table>
</div>
</div>
点击页面上的按钮后,javascript正在启动。但是
【问题讨论】:
-
请更具体地说明您需要实现什么,或者您为什么需要它。要将 HTML DOM 的内容放入 Excel 文件,我建议使用 CSV。真正的Excel文件本身的格式是很难通过代码生成的。
标签: javascript excel utf-8