Подтвердить что ты не робот

Как экспортировать таблицу html в excel с помощью javascript

Моя таблица в формате

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

ОТВЕТЫ

Ответ 1

Причина, по которой решение, найденное вами в Интернете, не работает, происходит из-за строки, начинающейся с var colCount. Переменная mytable имеет только два элемента: <thead> и <tbody>. Строка var colCount ищет все элементы в mytable, которые <tr>. Лучшее, что вы можете сделать, это предоставить идентификатор вашим <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>.

EDIT: Я также очень рекомендую использовать 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.

EDIT: Чтобы ответить на вопрос о том, как это сделать для 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() или, тем не менее, вы хотите установить это.

Ответ 2

Работает только в Mozilla, Chrome и Safari.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js">            </script>
<script type="text/javascript">
$(function(){
    $('button').click(function(){
        var url='data:application/vnd.ms-excel,' + encodeURIComponent($('#tableWrap').html()) 
        location.href=url
        return false
    })
})
</script>
<style type="text/css">

</style>
<title>Untitled</title>
    </head>
    <body>
    <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>
    </body>
  </html>

Ответ 3

Это может быть лучший ответ, скопированный из этого вопроса. Пожалуйста, попробуйте и дайте свое мнение здесь. Проголосуйте, если сочтете это полезным. Спасибо.

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

Ответ 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>

Ответ 5

    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) {
                    }

    }

Ответ 6

Проверьте это... Я просто получил эту работу, и похоже, что вы тоже пытаетесь сделать.

2 функции. Один, чтобы выбрать таблицу и скопировать ее в буфер обмена, а второй записывает ее в расширенном режиме. Просто вызовите write_to_excel() и поместите в свой идентификатор таблицы (или измените его, чтобы принять его как аргумент).

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

Сильно зависит от: Выберите полную таблицу с Javascript (для копирования в буфер обмена)

Ответ 7

Проверьте https://github.com/linways/table-to-excel. Это оболочка для exceljs/exceljs для экспорта HTML-таблиц в xlsx.

TableToExcel.convert(document.getElementById("simpleTable1"));
<script src="https://cdn.jsdelivr.net/gh/linways/[email protected]/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>

Ответ 8

Я думаю, вы также можете думать об альтернативных архитектурах. Иногда что-то можно сделать другим способом намного проще. Если вы являетесь производителем HTML файла, вы можете написать обработчик HTTP для создания документа Excel на сервере (что намного проще, чем в JavaScript) и отправить файл клиенту. Если вы получаете этот HTML файл где-нибудь (например, версию HTML отчета), вы все равно можете использовать язык на стороне сервера, такой как С# или PHP, для создания файла Excel все же очень легко. Я имею в виду, у вас могут быть и другие способы.:)

Ответ 9

Я пробую это с помощью 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(ваш var);

Ответ 10

Я бы предложил использовать другой подход. Добавьте на веб-страницу кнопку, которая скопирует содержимое таблицы в буфер обмена, с символами TAB между столбцами и символами новой строки между строками. Таким образом, функция "вставки" в Excel должна работать правильно, и ваше веб-приложение также будет работать со многими браузерами и во многих операционных системах (linux, mac, mobile), и пользователи смогут использовать данные также с другими электронными таблицами или текстовой обработкой программы.

Единственная сложная часть - скопировать в буфер обмена, потому что многие браузеры одержимы безопасностью. Решение состоит в том, чтобы подготовить данные, уже выбранные в текстовом поле, и показать их пользователю в модальном диалоговом окне, где вы указываете пользователю скопировать текст (некоторым нужно будет набрать Ctrl-C, другие Command-c, другие будут используйте "длинное касание" или всплывающее меню).

Было бы лучше иметь стандартную функцию копирования-в-буфер обмена, которая, возможно, запрашивает подтверждение пользователя... но это не так, к сожалению.

Ответ 11

У меня есть HTML-таблица, которая динамически добавляет данные строки, принимая пользовательский ввод. Как мне экспортировать эти данные таблицы в Excel?