Html to Excel。 utf-8でJSを介してExcelにエクスポートするにはどうすればいいですか？

-1

私はこの問題の答えを見つけるために、stackoverflowや他のインターネットリソースに多くの時間を費やしました。しかし、私は解決策を現在のコードに変換できませんでした（それは非常に重要です）。Html to Excel。 utf-8でJSを介してExcelにエクスポートするにはどうすればいいですか？

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の私は、これはあなたの要件を満たしている願っていますpage.But

出典

2017-11-17 IDobrodushniy

あなたが達成するために必要なもので、より具体的に、またはあなたはこれを必要とするかもしれない理由をしてください。 HTML DOMのコンテンツをExcelファイルに変換するには、CSVを使用することをおすすめします。実際のExcelファイル自体の形式は、コードを使用して生成するのが非常に困難です。 – Efrain

上のボタンをクリックした後、起動されます。：だから私は以下のコードを持っています

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> 
 
\t </tbody> 
 
</table>

出典

2017-11-17 11:31:04

Html to Excel。 utf-8でJSを介してExcelにエクスポートするにはどうすればいいですか？

答えて

関連する問題