java - 如何为java脚本中表的所有条目提供下载选项？答案

【问题标题】：How to provide a download option for all the entries of a table in java script?java - 如何为java脚本中表的所有条目提供下载选项？
【发布时间】：2018-04-03 15:04:34
【问题描述】：

我有一个如下所示的表格：

此外，正如您在底部看到的那样，我提供了一个将 HTML 下载为 CSV 的按钮，但它仅提供页面上可见的 25 个条目的下载。我想为最终用户提供所有条目 (551,483) 的下载选项。我该怎么做？您可以在下面看到我使用的代码：

downloadCSV (csv, filename) {
    var csvFile;
    var downloadLink;
    csvFile = new Blob([csv], {type: 'text/csv'});
    downloadLink = document.createElement('a');
    downloadLink.download = filename;
    downloadLink.href = window.URL.createObjectURL(csvFile);
    downloadLink.style.display = 'none';
    document.body.appendChild(downloadLink);
    downloadLink.click();
},

exportTableToCSV (filename) {
    var csv = [];
    var rows = document.querySelectorAll('table tr');
    for (var i = 0; i < rows.length; i++) {
        var row = [];
        var cols = rows[i].querySelectorAll('td, th');
        for (var j = 0; j < cols.length; j++) {           
            row.push(cols[j].innerText); 
        }
        csv.push(row.join(','));
    }
    this.downloadCSV(csv.join('\n'), filename);
}

【问题讨论】：

您将不得不从服务器获取所有行的内容。在服务器上准备下载可能是一个更好的主意。
简短的禅宗回答是，您无法导出不存在的数据。 IE。您需要以某种方式获取所有 500k 行。
您可以将所有 551,483 个条目的记录作为 JSON 存储在 JS 变量中，或者存储在 <div> 元素中并在导出期间获取它们，但这是一个非常糟糕的主意。这就是为什么要进行分页，以避免页面上的大量数据导致页面加载时间缩短。您应该使用服务器的 API，它将所有条目导出到文件并使用 iframe 下载。

标签： javascript csv html-table download

【解决方案1】：

您的服务器向客户端发送 25 个项目，因此您的客户端只有 25 个项目。如果您不将所有项目发送到客户端，那么您将无法在不向服务器发送请求的情况下导出它们。因此，您有两种选择：

您可以将包含所有数据的 JSON 发送到客户端，但这似乎不是一个好主意，特别是如果服务器必须将如此大的数据块发送给多个用户同时（DDOS 攻击将变得极其容易）。此外，加载页面可能会花费大量时间，不必要地让用户等待一段时间，并且用户不一定希望在所有页面加载中导出数据，从而使您的服务器所做的努力和 UX 牺牲了自我失败的想法。
在我看来，更好的方法是在服务器端提供导出可能性，并且您只能按需请求数据。这似乎是一种更明智的方法。

【讨论】：