【问题标题】:How to export html table to excel using javascript如何使用javascript将html表格导出到excel
【发布时间】:2011-09-27 20:27:26
【问题描述】:

我的表格是格式

<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;
        }
    }

【问题讨论】:

  • Javascript 是浏览器端语言,您可以使用服务器端语言将 HTML 文档转换为 PDF。另请注意,ActiveXObject 解决方案不可移植,它仅适用于 IE。
  • 没有IE的解决方案是行不通的
  • 这里的非IE解决方案:stackoverflow.com/questions/6955627/…

标签: javascript html


【解决方案1】:

检查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 获取工作示例。

【讨论】:

  • 这段代码已经失效了,要么更新要么删除答案。
  • @AtulKumar 我已经重写了 1.x 版的所有内容。现在用法有点改变,因为我把底层库改成了 exceljs。您可以在以下位置找到一个工作示例:codepen.io/rohithb/pen/YdjVbb
【解决方案2】:

仅适用于 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文件命名?
  • 哇。很好的解决方案。
  • 如果您有重音字符则失败。重音字符无法正确显示在 Excel 中。
【解决方案3】:

您在互联网上找到的解决方案不起作用的原因是因为以var colCount 开头的行。变量mytable 只有两个元素&lt;thead&gt;&lt;tbody&gt;var colCount 行正在查找 mytable 中所有属于 &lt;tr&gt; 的元素。您可以做的最好的事情是为您的&lt;thead&gt;&lt;tbody&gt; 提供一个ID,然后根据它获取所有值。假设你有&lt;thead id='headers'&gt;

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;
    }
}

}

然后对&lt;tbody&gt; 标签做同样的事情。

编辑:我也强烈推荐使用 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个表,我如何使用该功能。
  • 虽然遗憾的是这只适用于 IE,但 OP 并不是关于如何让他的代码在多个浏览器中工作。这是关于为什么他当前的代码无法与他拥有的表格一起使用。深入研究使 javascript 在多个浏览器中工作的问题(这是 JS 一开始的目的),我觉得超出了这个问题的范围。就个人而言,我从不使用 IE,除非我公司的 Intranet 强制要求。
  • @prashu132 '这是真的,这只适用于 IE。 (正如我之前的评论所提到的那样令人遗憾。)如果您正在寻找一个更跨浏览器的解决方案,我建议您将数据推送到服务器端并在那里进行生成,然后再将其推送回客户端。似乎还有一个使用位于this SO question的jQuery插件的解决方案@
  • @CharlesCaldwell:我找到了另一个可能更好的答案。如果好用且有用,请尝试并投票。谢谢。
  • 你永远不会使用这个 var ExcelApp = new ActiveXObject("Excel.Application");在 javascript 或 jquery 中。我也无法让它在 IE 10 中工作
【解决方案4】:
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 感谢您提供有用的解决方案。根据您的回答,我有一个问题,我想征求您的意见。我有一张表,页面大小为 10,因为我必须为每页显示 10 行/记录。该表包含 18 行/记录,因此该表将有 2 页,在按钮中如果我单击按钮导出到 excel,它可以在第 1 页显示行/记录。但是在第 2 页中,如果我单击按钮导出excel,它在第1页显示行/记录。
  • @sampopes (cont) 此时,我猜可能是浏览器(Internet Explorer)记住了第1页的内容,所以我刷新浏览器,点击表格的第2页,然后点击按钮要导出 excel,但是它(excel)仍然在第 1 页中显示行/记录。我尝试过的是:我添加了另一个 iframe txtArea2 并在函数内添加了 txtArea2 的代码。我运行程序,结果是一样的。您知道如何根据表格页面导出表格数据吗?非常感谢。
【解决方案5】:

这可能是从this question复制的更好答案。

<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>

【讨论】:

  • 数据:application/vnd.ms-excel;base64,undefined
【解决方案6】:
    function XLExport() {
        try {
            var i;
            var j;
            var mycell;
            var tableID = "tblInnerHTML";

            var objXL = new ActiveXObject("Excel.Application");
            var objWB = objXL.Workbooks.Add();
            var objWS = objWB.ActiveSheet;

            for (i = 0; i < document.getElementById('<%= tblAuditReport.ClientID %>').rows.length; i++) {
                for (j = 0; j < document.getElementById('<%= tblAuditReport.ClientID %>').rows(i).cells.length; j++) {
                    mycell = document.getElementById('<%= tblAuditReport.ClientID %>').rows(i).cells(j);
                    objWS.Cells(i + 1, j + 1).Value = mycell.innerText;
                }
            }

            //objWS.Range("A1", "L1").Font.Bold = true;

            objWS.Range("A1", "Z1").EntireColumn.AutoFit();

            //objWS.Range("C1", "C1").ColumnWidth = 50;

            objXL.Visible = true;

        }
        catch (err) {
                    }

    }

【讨论】:

    【解决方案7】:

    检查一下...我刚刚开始使用它,它似乎也正是您想要做的。

    2 个功能。一个选择表格并将其复制到剪贴板,第二个将其写入excel。只需调用 write_to_excel() 并输入您的表 id(或修改它以将其作为参数)。

      function selectElementContents(el) {
            var body = document.body, range, sel;
            if (document.createRange && window.getSelection) {
                range = document.createRange();
                sel = window.getSelection();
                sel.removeAllRanges();
                try {
                    range.selectNodeContents(el);
                    sel.addRange(range);
                } catch (e) {
                    range.selectNode(el);
                    sel.addRange(range);
                }
            } else if (body.createTextRange) {
                range = body.createTextRange();
                range.moveToElementText(el);
                range.select();
            }
            range.execCommand("Copy");
        }
    
    function write_to_excel() 
    {
    var tableID = "AllItems";
    selectElementContents( document.getElementById(tableID) );
    
    var excel = new ActiveXObject("Excel.Application");
    // excel.Application.Visible = true; 
    var wb=excel.WorkBooks.Add();
    var ws=wb.Sheets("Sheet1");
    ws.Cells(1,1).Select;
    ws.Paste;
    ws.DrawingObjects.Delete;
    ws.Range("A1").Select
     excel.Application.Visible = true; 
    }
    

    严重影响:Select a complete table with Javascript (to be copied to clipboard)

    【讨论】:

      【解决方案8】:

      我认为您还可以考虑替代架构。有时可以用另一种更容易的方式来完成某些事情。如果 HTML 文件的生产者是您,那么您可以编写一个 HTTP 处理程序在服务器上创建一个 Excel 文档(这比 JavaScript 更容易)并将文件发送到客户端。如果您从某个地方(如报表的 HTML 版本)收到该 HTML 文件,那么您仍然可以使用 C# 或 PHP 等服务器端语言来非常轻松地创建 Excel 文件。我的意思是,你可能还有其他方法。 :)

      【讨论】:

        【解决方案9】:

        我建议使用不同的方法。在网页上添加一个按钮,将表格的内容复制到剪贴板,列之间有 TAB 字符,行之间有换行符。这样,Excel 中的“粘贴”功能应该可以正常工作,并且您的 Web 应用程序也可以在许多浏览器和许多操作系统(linux、mac、移动)上工作,并且用户也可以将数据与其他电子表格或文字处理一起使用程序。

        唯一棘手的部分是复制到剪贴板,因为许多浏览器都对安全着迷。一种解决方案是准备已在文本区域中选择的数据,并在模态对话框中向用户显示,在该对话框中告诉用户复制文本(有些需要键入 Ctrl-C,其他需要使用 Command-c,其他需要使用“长按”或弹出菜单)。

        如果有一个标准的复制到剪贴板功能可能会要求用户确认会更好......但不幸的是,情况并非如此。

        【讨论】:

          【解决方案10】:

          我用 jquery 试试这个; 使用它并玩得开心:D

              jQuery.printInExcel = function (DivID) 
          { 
          var ExcelApp = new ActiveXObject("Excel.Application"); 
          ExcelApp.Workbooks.Add; 
          ExcelApp.visible = true; 
          var str = ""; 
          var tblcount = 0; 
          var trcount = 0;
           $("#" + DivID + " table").each(function () 
          { $(this).find("tr").each(function () 
          { var tdcount = 0; $(this).find("td").each(function () 
          { str = str + $(this).text(); ExcelApp.Cells(trcount + 1, tdcount + 1).Value = str; 
          str = ""; tdcount++ 
          }); 
          trcount++ 
          }); tblcount++ 
          }); 
          };
          

          在你的课堂上使用它并用 $.printInExcel(your var);

          调用它

          【讨论】:

            【解决方案11】:

            函数exportExcelFromTable(){

            let table = document.getElementById('tableId');
            console.log(table); 
            
            TableToExcel.convert(table, { 
                name: `export.xlsx`,
                sheet: {
                  name: 'Exported_Data' // sheetName
                }
              });
            

            }

            【讨论】:

              猜你喜欢
              • 2014-06-20
              • 1970-01-01
              • 2013-03-11
              • 2023-03-27
              • 1970-01-01
              • 1970-01-01
              • 2017-05-10
              • 2017-07-14
              • 2013-06-13
              相关资源
              最近更新 更多