Экспорт таблицы HTML в Excel с помощью Javascript

Ответ 1

В 2016-07-12 Microsoft нажала обновление безопасности для Microsoft Office. Одним из последствий этого обновления было предотвращение того, чтобы файлы HTML из недоверенных доменов открывались Excel, потому что они не могут быть открыты в защищенном режиме.

Существует ТАКЖЕ параметр реестра, который запрещает Excel открывать файлы с расширением .XLS, содержимое которого не соответствует официальному формату файла XLS, хотя по умолчанию он "предупреждает", а не "отказывает".

До этого изменения можно было сохранить данные HTML в файл с расширением XLS, и Excel откроет его правильно - возможно, с предупреждением сначала, что файл не соответствует формату Excel, в зависимости от пользовательского значения для раздела реестра ExtensionHardening (или связанных значений конфигурации).

Microsoft сделала запись базы знаний о новом поведении с некоторыми предлагаемыми обходными решениями.

Несколько веб-приложений, которые ранее полагались на экспорт файлов HTML как XLS, столкнулись с трудностями в результате обновления - SalesForce - это один пример.

Ответы до 12 июля 2016 года на этот и подобные вопросы, вероятно, будут теперь недействительными.

Стоит отметить, что файлы, созданные на BROWSER из удаленных данных, не падают на эту защиту; это только препятствует загрузке файлов из удаленного источника, которому не доверяют. Поэтому одним из возможных подходов является создание HTML файла с маркировкой .XLS локально на клиенте.

Другим, конечно же, является создание допустимого файла XLS, который Excel откроется в защищенном режиме.

ОБНОВЛЕНИЕ: Microsoft выпустила исправление, чтобы исправить это поведение: https://support.microsoft.com/en-us/kb/3181507

Ответ 2

SheetJS кажется идеальным для этого.

Чтобы экспортировать таблицу в качестве файла excel, используйте код в этой ссылке (вместе с SheetJS)

Просто подключите идентификатор элемента table к export_table_to_excel

См. Demo

Ответ 3

Если формат CSV подходит для вас, вот пример.

• Хорошо... Я просто прочитал комментарий, в котором вы явно говорите, что это не хорошо для вас. Мой плохой для того, чтобы не учиться читать перед кодированием.

Насколько я знаю, Excel может обрабатывать CSV.

function fnExcelReport() {
var i, j;
var csv = "";

var table = document.getElementById("table");

var table_headings = table.children[0].children[0].children;
var table_body_rows = table.children[1].children;

var heading;
var headingsArray = [];
for(i = 0; i < table_headings.length; i++) {
  heading = table_headings[i];
  headingsArray.push('"' + heading.innerHTML + '"');
}

csv += headingsArray.join(',') + ";\n";

var row;
var columns;
var column;
var columnsArray;
for(i = 0; i < table_body_rows.length; i++) {
  row = table_body_rows[i];
  columns = row.children;
  columnsArray = [];
  for(j = 0; j < columns.length; j++) {
      var column = columns[j];
      columnsArray.push('"' + column.innerHTML + '"');
  }
  csv += columnsArray.join(',') + ";\n";
}

  download("export.csv",csv);
}

//From: http://stackoverflow.com/a/18197511/2265487
function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

<iframe id="txtArea1" style="display:none"></iframe>

Call this function on

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

<table id="table">
  <thead>
    <tr>
      <th>Head1</th>
      <th>Head2</th>
      <th>Head3</th>
      <th>Head4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
      <td>33</td>
      <td>34</td>
    </tr>
    <tr>
      <td>41</td>
      <td>42</td>
      <td>43</td>
      <td>44</td>
    </tr>
  </tbody>
</table>

Ответ 4

добавьте это в свою голову:

<meta http-equiv="content-type" content="text/plain; charset=UTF-8"/>

и добавьте это как свой javascript:

<script type="text/javascript">
var tableToExcel = (function() {
  var uri = 'data:application/vnd.ms-excel;base64,'
    , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>'
    , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
    , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
  return function(table, name) {
    if (!table.nodeType) table = document.getElementById(table)
    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
    window.location.href = uri + base64(format(template, ctx))
  }
})()
</script>

Jfiddle: http://jsfiddle.net/cmewv/537/

Ответ 5

попробуйте это

<table id="exportable">
<thead>
      <tr>
          //headers
      </tr>
</thead>
<tbody>
         //rows
</tbody>
</table>

Script для этого

var blob = new Blob([document.getElementById('exportable').innerHTML], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
        });
saveAs(blob, "Report.xls");

Ответ 6

<hrml>
  <head>
     <script language="javascript">
      function exportF() {
  //Format your table with form data
  document.getElementById("input").innerHTML = document.getElementById("text").value;
   document.getElementById("input1").innerHTML = document.getElementById("text1").value;
  var table = document.getElementById("table");
  var html = table.outerHTML;

  var url = 'data:application/vnd.C:\\Users\WB-02\desktop\Book1.xlsx,' + escape(html); // Set your html table into url 
  var link = document.getElementById("downloadLink");
  link.setAttribute("href", url);
  link.setAttribute("download", "export.xls"); // Choose the file name
  link.click(); // Download your excel file   
  return false;
}
    </script>
 </head>
 <body>
<form onsubmit="return exportF()">
  <input id="text" type="text" />
  <input id="text1" type="text" />
  <input type="submit" />
</form>

<table id="table" style="display: none">
  <tr>
    <td id="input">
    <td id="input1">
    </td>
  </tr>
</table>
<a style="display: none" id="downloadLink"></a>
</body>
</html>