Html到Excel。如何通过JS使用utf-8将html导出到excel？

时间：2017-11-17 10:31:35

标签： javascript excel utf-8

我花了很多时间在stackoverflow和其他互联网资源上找到这个问题的答案。但我无法将解决方案转换为我当前的代码（这非常重要）。所以我有以下代码：

＆＃13;
＆＃13; 
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();
＆＃13; 
<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;">
                        &nbsp;

                        <span>
                            <span>
                                July
                            </span>

                            &nbsp;

                            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 &amp; 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>
＆＃13;
＆＃13;
＆＃13;

点击页面上的按钮后，javascript就开始了。但

1 个答案:

答案 0 :(得分：0)

我希望这符合您的要求;

＆＃13;
＆＃13; 
window.open('data:application/vnd.ms-excel,' + $('#tableToBeExported').html());
＆＃13; 
<table id="tableToBeExported">
  <tbody>
    <tr>
      <th style="border-top-color: skyblue; border-left-color: skyblue; border-right-color: skyblue; color: skyblue;">&nbsp;<span><span>July</span>&nbsp;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 &amp; 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>
        <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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题