【问题标题】:Html to Excel. How to export html to excel via JS with utf-8?将 HTML 转换为 Excel。如何使用utf-8通过JS将html导出到excel?
【发布时间】: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;">
                        &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>

点击页面上的按钮后,javascript正在启动。但是

【问题讨论】:

  • 请更具体地说明您需要实现什么,或者您为什么需要它。要将 HTML DOM 的内容放入 Excel 文件,我建议使用 CSV。真正的Excel文件本身的格式是很难通过代码生成的。

标签: javascript excel utf-8


【解决方案1】:

我希望这符合您的要求;

window.open('data:application/vnd.ms-excel,' + $('#tableToBeExported').html());
<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>

【讨论】:

    猜你喜欢
    • 2014-11-02
    • 2012-11-24
    • 2021-02-11
    • 1970-01-01
    • 2016-06-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多