IT技术 - 如何使用javascript将html表格导出到excel - 吾爱随笔录

如何使用javascript将html表格导出到excel

IT技术 javascript html

2021-02-07 00:10:31

我的表格是格式

<table id="mytable">
<thead>
  <tr>
    <th>name</th>
    <th>place</th>
  </tr>
</thead>
<tbody>
<tr>
   <td>adfas</td>
   <td>asdfasf</td>
</tr>
</tbody>
</table>

我在网上找到了以下代码。但是如果我使用“thead”和“tbody”标签就行不通了

function write_to_excel() {

    str = "";

    var mytable = document.getElementsByTagName("table")[0];
    var rowCount = mytable.rows.length;
    var colCount = mytable.getElementsByTagName("tr")[0].getElementsByTagName("td").length;

    var ExcelApp = new ActiveXObject("Excel.Application");
    var ExcelSheet = new ActiveXObject("Excel.Sheet");
    ExcelSheet.Application.Visible = true;

    for (var i = 0; i < rowCount; i++) {
        for (var j = 0; j < colCount; j++) {
            str = mytable.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].innerHTML;
            ExcelSheet.ActiveSheet.Cells(i + 1, j + 1).Value = str;
        }
    }

6个回答

检查https://github.com/linways/table-to-excel。它是exceljs/exceljs的包装器，用于将 html 表导出到 xlsx。

TableToExcel.convert(document.getElementById("simpleTable1"));

<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>
<table id="simpleTable1" data-cols-width="70,15,10">
<tbody>
    <tr>
        <td class="header" colspan="5" data-f-sz="25" data-f-color="FFFFAA00" data-a-h="center" data-a-v="middle" data-f-underline="true">
            Sample Excel
        </td>
    </tr>
    <tr>
        <td colspan="5" data-f-italic="true" data-a-h="center" data-f-name="Arial" data-a-v="top">
            Italic and horizontal center in Arial
        </td>
    </tr>
    <tr>
        <th data-a-text-rotation="90">Col 1 (number)</th>
        <th data-a-text-rotation="vertical">Col 2</th>
        <th data-a-wrap="true">Wrapped Text</th>
        <th data-a-text-rotation="-45">Col 4 (date)</th>
        <th data-a-text-rotation="-90">Col 5</th>
    </tr>
    <tr>
        <td rowspan="1" data-t="n">1</td>
        <td rowspan="1" data-b-b-s="thick" data-b-l-s="thick" data-b-r-s="thick">
            ABC1
        </td>
        <td rowspan="1" data-f-strike="true">Striked Text</td>
        <td data-t="d">05-20-2018</td>
        <td data-t="n" data-num-fmt="$ 0.00">2210.00</td>
    </tr>

    <tr>
        <td rowspan="2" data-t="n">2</td>
        <td rowspan="2" data-fill-color="FFFF0000" data-f-color="FFFFFFFF">
            ABC 2
        </td>
        <td rowspan="2" data-a-indent="3">Merged cell</td>
        <td data-t="d">05-21-2018</td>
        <td data-t="n" data-b-a-s="dashed" data-num-fmt="$ 0.00">230.00</td>
    </tr>
    <tr>
        <td data-t="d">05-22-2018</td>

        <td data-t="n" data-num-fmt="$ 0.00">2493.00</td>
    </tr>

    <tr>
        <td colspan="4" align="right" data-f-bold="true" data-a-h="right" data-hyperlink="https://google.com">
            <b><a href="https://google.com">Hyperlink</a></b>
        </td>
        <td colspan="1" align="right" data-t="n" data-f-bold="true" data-num-fmt="$ 0.00">
            <b>4933.00</b>
        </td>
    </tr>
    <tr>
        <td colspan="4" align="right" data-f-bold="true" data-a-rtl="true">
            مرحبا
        </td>
        <td colspan="1" align="right" data-t="n" data-f-bold="true" data-num-fmt="$ 0.00">
            <b>2009.00</b>
        </td>
    </tr>
    <tr>
        <td data-b-a-s="dashed" data-b-a-c="FFFF0000">All borders</td>
    </tr>
    <tr>
        <td data-t="b">true</td>
        <td data-t="b">false</td>
        <td data-t="b">1</td>
        <td data-t="b">0</td>
        <td data-error="#VALUE!">Value Error</td>
    </tr>
    <tr>
        <td data-b-t-s="thick" data-b-l-s="thick" data-b-b-s="thick" data-b-r-s="thick" data-b-t-c="FF00FF00" data-b-l-c="FF00FF00" data-b-b-c="FF00FF00" data-b-r-c="FF00FF00">
            All borders separately
        </td>
    </tr>
    <tr data-exclude="true">
        <td>Excluded row</td>
        <td>Something</td>
    </tr>
    <tr>
        <td>Included Cell</td>
        <td data-exclude="true">Excluded Cell</td>
        <td>Included Cell</td>
    </tr>
</tbody>
</table>

这会在客户端创建有效的 xlsx。还支持一些基本的样式。检查https://codepen.io/rohithb/pen/YdjVbb以获得一个工作示例。

此代码不再有效，更新或删除答案。

2021-04-05 00:10:31

@AtulKumar 我已经在 1.x 版上重写了所有内容。现在用法稍微改变了，因为我把底层库改成了exceljs。您可以在以下位置找到工作示例：codepen.io/rohithb/pen/YdjVbb。

2021-04-06 00:10:31

仅适用于 Mozilla、Chrome 和 Safari。

$(function() {
  $('button').click(function() {
    var url = 'data:application/vnd.ms-excel,' + encodeURIComponent($('#tableWrap').html())
    location.href = url
    return false
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

</script>
<button>click me</button>
<div id="tableWrap">
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>

如何为excel文件命名？

2021-03-16 00:10:31

如果您有重音字符，则失败。重音字符未正确显示在 Excel 中。

2021-03-20 00:10:31

哇。优秀的解决方案。

2021-03-27 00:10:31

您在 Internet 上找到的解决方案不起作用的原因是因为开头的行var colCount。该变量mytable只有两个元素是<thead>和<tbody>。该var colCount行正在寻找内的所有元素mytable是<tr>。你能做的最好的事情就是给一个id你<thead>和<tbody>然后抓住所有基于该值。说你有<thead id='headers'>：

function write_headers_to_excel() 
{
  str="";

  var myTableHead = document.getElementById('headers');
  var rowCount = myTableHead.rows.length;
  var colCount = myTableHead.getElementsByTagName("tr")[0].getElementsByTagName("th").length; 

var ExcelApp = new ActiveXObject("Excel.Application");
var ExcelSheet = new ActiveXObject("Excel.Sheet");
ExcelSheet.Application.Visible = true;

for(var i=0; i<rowCount; i++) 
{   
    for(var j=0; j<colCount; j++) 
    {           
        str= myTableHead.getElementsByTagName("tr")[i].getElementsByTagName("th")[j].innerHTML;
        ExcelSheet.ActiveSheet.Cells(i+1,j+1).Value = str;
    }
}

}

然后对<tbody>标签做同样的事情。

编辑：我也强烈推荐使用 jQuery。它将缩短为：

function write_to_excel() 
{
 var ExcelApp = new ActiveXObject("Excel.Application");
 var ExcelSheet = new ActiveXObject("Excel.Sheet");
 ExcelSheet.Application.Visible = true; 

  $('th, td').each(function(i){
    ExcelSheet.ActiveSheet.Cells(i+1,i+1).Value = this.innerHTML;
  });
}

现在，当然，这会给您带来一些格式问题，但您可以确定在 Excel 中如何设置格式。

编辑：要回答您关于如何为n多个表执行此操作的问题，jQuery 将已执行此操作。要在原始 Javascript 中执行此操作，请获取所有表，然后更改函数以便能够将表作为参数传入。例如：

var tables = document.getElementsByTagName('table');
for(var i = 0; i < tables.length; i++)
{
  write_headers_to_excel(tables[i]);
  write_bodies_to_excel(tables[i]);
}

然后将更改function write_headers_to_excel()为function write_headers_to_excel(table)。然后更改var myTableHead = document.getElementById('headers');为var myTableHead = table.getElementsByTagName('thead')[0];. 与您的write_bodies_to_excel()或您想设置的相同。

非常感谢你。有效。我还有一个问题。如果我的 html 页面中有 n 个表格，我该如何使用该功能。

2021-03-29 00:10:31

你永远不会使用这个 var ExcelApp = new ActiveXObject("Excel.Application"); 在 javascript 或 jquery 中。我也无法在 IE 10 中使用它

2021-04-03 00:10:31

@CharlesCaldwell：我找到了另一个可能更好的答案。请尝试一下，如果好和有用，请投票。谢谢你。

2021-04-04 00:10:31

尽管这仅适用于 IE 令人遗憾，但 OP 并不是关于如何使他的代码跨多个浏览器工作。这是关于为什么他当前的代码不能与他拥有的表格一起使用的原因。深入研究使 javascript 在多个浏览器中工作的问题（这是 JS 开始的目的）我觉得超出了这个问题的范围。就我个人而言，我从不使用 IE，除非我公司的内部网强迫使用。

2021-04-06 00:10:31

@prashu132 '这是非常正确的，这只适用于 IE。（正如我之前的评论所提到的那样，这是一种耻辱。）如果您正在寻找更跨浏览器的解决方案，我建议将数据推送到服务器端并在那里进行生成，然后再将其推送回客户端。似乎还有一个使用位于此 SO 问题中的 jQuery 插件的解决方案

2021-04-12 00:10:31

Excel Export Script works on IE7+ , Firefox and Chrome
===========================================================



function fnExcelReport()
    {
             var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
             var textRange; var j=0;
          tab = document.getElementById('headerTable'); // id of table


          for(j = 0 ; j < tab.rows.length ; j++) 
          {     
                tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
                //tab_text=tab_text+"</tr>";
          }

          tab_text=tab_text+"</table>";
          tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
          tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
                      tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params

               var ua = window.navigator.userAgent;
              var msie = ua.indexOf("MSIE "); 

                 if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
                    {
                           txtArea1.document.open("txt/html","replace");
                           txtArea1.document.write(tab_text);
                           txtArea1.document.close();
                           txtArea1.focus(); 
                            sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
                          }  
                  else                 //other browser not tested on IE 11
                      sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  


                      return (sa);
                            }

    Just Create a blank iframe
    enter code here
        <iframe id="txtArea1" style="display:none"></iframe>

    Call this function on

        <button id="btnExport" onclick="fnExcelReport();"> EXPORT 
        </button>

@sampopes (cont) 这个时候，我猜可能浏览器（Internet Explorer）记得第1页的内容，所以我刷新浏览器，点击表格的第2页，然后点击按钮导出excel，但是它（ excel) 仍然在第 1 页中显示行/记录。我尝试过的方法：我添加另一个 iframetxtArea2并txtArea2在函数内部添加代码。我运行程序，结果是一样的。您知道如何根据表格页面导出表格数据吗？非常感谢你。

2021-03-21 00:10:31

@sampopes 感谢您提供有用的解决方案。根据您的回答，我有一个问题，我想请教您。我有一张表格，页面大小为 10，因为我必须为每页显示 10 行/记录。该表包含 18 行/记录，因此该表将有 2 页，在按钮中，如果我单击导出到 excel 的按钮，它可以显示第 1 页中的行/记录。但是在第 2 页中，如果我单击按钮导出 excel，它在第 1 页显示行/记录。

2021-04-05 00:10:31

此脚本的较新版本几乎已准备就绪，具有额外的功能。将很快发布。

2021-04-11 00:10:31

这可能是从这个问题复制的更好的答案。

<script type="text/javascript">
function generate_excel(tableid) {
  var table= document.getElementById(tableid);
  var html = table.outerHTML;
  window.open('data:application/vnd.ms-excel;base64,' + base64_encode(html));
}

function base64_encode (data) {
  // http://kevin.vanzonneveld.net
  // +   original by: Tyler Akins (http://rumkin.com)
  // +   improved by: Bayron Guevara
  // +   improved by: Thunder.m
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   bugfixed by: Pellentesque Malesuada
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   improved by: Rafal Kukawski (http://kukawski.pl)
  // *     example 1: base64_encode('Kevin van Zonneveld');
  // *     returns 1: 'S2V2aW4gdmFuIFpvbm5ldmVsZA=='
  // mozilla has this native
  // - but breaks in 2.0.0.12!
  //if (typeof this.window['btoa'] == 'function') {
  //    return btoa(data);
  //}
  var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
  var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
    ac = 0,
    enc = "",
    tmp_arr = [];

  if (!data) {
    return data;
  }

  do { // pack three octets into four hexets
    o1 = data.charCodeAt(i++);
    o2 = data.charCodeAt(i++);
    o3 = data.charCodeAt(i++);

    bits = o1 << 16 | o2 << 8 | o3;

    h1 = bits >> 18 & 0x3f;
    h2 = bits >> 12 & 0x3f;
    h3 = bits >> 6 & 0x3f;
    h4 = bits & 0x3f;

    // use hexets to index into b64, and append result to encoded string
    tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
  } while (i < data.length);

  enc = tmp_arr.join('');

  var r = data.length % 3;

  return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3);

}
</script>

数据：应用程序/vnd.ms-excel；base64，未定义

2021-04-11 00:10:31

其它你可能感兴趣的问题

上一篇浏览器窗口意外关闭时发出警报下一篇如何在 PHP 中立即执行匿名函数？