使用 javascript 将巨大的（3000 多行）HTML 表导出到 Excel答案

【问题标题】：Exporting huge (3000+ rows) HTML tables to Excel using javascript使用 javascript 将巨大的（3000 多行）HTML 表导出到 Excel
【发布时间】：2015-09-29 08:11:37
【问题描述】：

我在导出包含大量行数的 HTML 表格时遇到问题。正如我在标题中指出的那样，它有 3000 多行和大约 6 列。

这个我试过了，How to export html table to excel using javascript

工作正常！好吧，至少在小桌子上。但是当我将它与要转换的表绑定时，它会加载一段时间然后停止。

有人可以帮我吗？

PS，我不想使用 ActiveXObject，因为我不想仅限于使用 IE。

提前致谢！

编辑：代码

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]--></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))
  }
})()

适用于 IE 和 Firefox，但不适用于 chrome。这是为什么呢？

【问题讨论】：

How to export html table to excel using javascript的可能重复
@JunchaoGu，我没有这样的东西。他有一个弹出式“下载”，但不是 XLS 格式，但我没有这样的。
@GergelyPolonkai，我试图避免使用 ActiveXObject，因为它限制我的用户只能将 IE 用于他的浏览器。
您应该重新考虑您的要求。表是如何生成的？服务器端？然后使用服务器端生成 xls。 在 url 上传递工作表总是会在某些时候失败，并且取决于浏览器。阅读本文了解更多信息：What is the maximum length of a URL in different browsers? (SO)
当你说“它加载一段时间然后停止” - 你的意思是它构建数据一段时间然后 脚本停止 或者脚本工作正常但是不是全部加载到excel中？

标签： javascript html excel

【解决方案1】：

我在那里查看了答案表，归功于：how to export table as excel with 10000 to 40000 rows

它可以在 Chrome 上运行（尚未在 IE 上测试），将 3867 行保存到 .xls 文件是好的；

希望这可以帮助某人。代码：

.html

<input type="button" class="col-2 btn btn-info" onclick="tableToExcel(myTableId)" value="Excel">

.js

function tableToExcel(tableId) {

  let 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="https://www.w3.org/TR/html401/"><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]; })}

  let table = document.getElementById(tableId)
  if (!table) {
    return;
  }
  let ctx = {worksheet: tableId || 'Worksheet', table: table.innerHTML}
  var str = base64(format(template, ctx));
  var blob = b64toBlob(str, "application/vnd.ms-excel");
  var blobUrl = URL.createObjectURL(blob);

  let link = document.createElement('a');
  link.download = openedTabId + '.xls'; // the fileName for download
  link.href = blobUrl;
  link.click();
  // window.location = blobUrl; // instead of using a link, could also do this;

  function b64toBlob(b64Data, contentType='', sliceSize=512) {
      var byteCharacters = atob(b64Data);
      var byteArrays = [];

      for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
          var slice = byteCharacters.slice(offset, offset + sliceSize);

          var byteNumbers = new Array(slice.length);
          for (var i = 0; i < slice.length; i++) {
              byteNumbers[i] = slice.charCodeAt(i);
          }

          var byteArray = new Uint8Array(byteNumbers);
          byteArrays.push(byteArray);
      }

      var blob = new Blob(byteArrays, {type: contentType});
      return blob;
  }
}

【讨论】：

【解决方案2】：

下面的代码在 chrome 中为我工作，用于表超过 2000 条记录。

csv = []
rows = $('#YourHTMLtableId tr');
for(i =0;i < rows.length;i++) {
cells = $(rows[i]).find('td,th');
csv_row = [];
for (j=0;j<cells.length;j++) {
    txt = cells[j].innerText;
    csv_row.push(txt.replace(",", "-"));
}
csv.push(csv_row.join(","));
}
output = csv.join("\n")
var textToSave = output;
var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
var fileNameToSaveAs = "something.csv";
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;

downloadLink.innerHTML = "Download File";

downloadLink.href = textToSaveAsURL;    
downloadLink.onclick = destroyClickedElement;
function destroyClickedElement(event)
  {
   document.body.removeChild(event.target);
   }
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);


downloadLink.click();

【讨论】：