使用JavaScript将巨大的（3000+行）HTML表格导出到Excel

9 浏览
0 Comments

使用JavaScript将巨大的（3000+行）HTML表格导出到Excel

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

我尝试了这个链接：如何使用JavaScript将HTML表格导出到Excel

对于小表格来说还行！但是当我将它应用到我想要转换的表格上时，它加载了一段时间然后停止了。

有人能帮我解决这个问题吗？

附注：我不想使用ActiveXObject，因为我不想局限于只使用IE。

提前感谢！

编辑：这段代码

var tableToExcel = (function() {
  var uri = 'data:application/vnd.ms-excel;base64,'
    , template = '{table}
'
    , 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上不行。为什么会这样呢？

0

2 答案

0 Comments

问题原因：在使用Javascript导出大型HTML表格到Excel时，如果表格的行数超过3000行，可能会出现问题。

解决方法：可以使用以下代码来解决这个问题：

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();

0
0 Comments

从上面的内容中，可以看出这个问题的出现原因是：作者想要将一个包含3000+行的HTML表格导出为Excel文件，但是直接使用JavaScript导出时遇到了困难。

解决方法是作者在网上搜索到一个解决方案，并进行了尝试。作者提供了一段可以在Chrome上运行的代码，通过点击按钮调用tableToExcel函数，将HTML表格转换为Excel文件并进行下载。

具体的解决方法如下：

1. 在HTML文件中添加一个按钮，通过onclick事件调用tableToExcel函数。

2. 在JavaScript文件中定义tableToExcel函数，该函数接受一个tableId参数，用于指定要导出的表格的id。

3. 在tableToExcel函数中，首先定义了几个辅助函数和变量，用于生成Excel文件的内容和数据。

4. 利用getElementById方法获取到要导出的表格。

5. 利用base64和format函数将表格内容和模板进行替换，生成最终的Excel文件内容。

6. 利用b64toBlob函数将base64编码的文件内容转换为Blob对象。

7. 利用URL.createObjectURL方法生成Blob对象的URL。

8. 创建一个a标签，设置download属性为要下载的文件名，设置href属性为Blob对象的URL。

9. 触发a标签的click事件，实现文件下载。

以上就是这个问题的出现原因和解决方法，通过这段代码可以实现将包含3000+行的HTML表格导出为Excel文件。

0