Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/ssh/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在java脚本中为表的所有条目提供下载选项?_Javascript_Csv_Html Table_Download - Fatal编程技术网

Javascript 如何在java脚本中为表的所有条目提供下载选项?

Javascript 如何在java脚本中为表的所有条目提供下载选项?,javascript,csv,html-table,download,Javascript,Csv,Html Table,Download,我有一张如下所示的桌子: 此外,正如您在底部看到的,我提供了一个从HTML到CSV的下载按钮,但它只提供了页面上可见的25个条目的下载。我想为最终用户提供所有条目(551483)的下载选项。我怎么做?您可以在下面看到我使用的代码: downloadCSV (csv, filename) { var csvFile; var downloadLink; csvFile = new Blob([csv], {type: 'text/csv'}); downloadL

我有一张如下所示的桌子:

此外,正如您在底部看到的,我提供了一个从HTML到CSV的下载按钮,但它只提供了页面上可见的25个条目的下载。我想为最终用户提供所有条目(551483)的下载选项。我怎么做?您可以在下面看到我使用的代码:

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);
}
下载csv(csv,文件名){
var-csvFile;
var下载链接;
csvFile=newblob([csv],{type:'text/csv'});
downloadLink=document.createElement('a');
downloadLink.download=文件名;
downloadLink.href=window.URL.createObjectURL(csvFile);
downloadLink.style.display='none';
document.body.appendChild(下载链接);
downloadLink.click();
},
exportTableToCSV(文件名){
var csv=[];
var rows=document.querySelectorAll('table tr');
对于(变量i=0;i
服务器向客户端发送25个项目,因此客户端只有25个项目。如果不将所有项目发送到客户端,则在不向服务器发送请求的情况下将无法导出这些项目。因此,您有两个选择:

  • 您可以将包含所有数据的JSON发送到客户端,但这似乎不是一个好主意,特别是如果服务器必须同时向多个用户发送如此大的数据块(DDOS攻击将变得极其容易)。此外,加载页面可能会花费大量时间,不必要地让用户等待一段时间,用户不一定希望在所有页面加载中导出数据,这使得服务器正在做出的努力和用户体验牺牲了自我挫败的想法

  • 在我看来,更好的方法是在服务器端具有导出的可能性,并且您只需要按需请求数据。这似乎是一个更明智的方法


  • 您必须从服务器获取所有行的内容。在服务器上准备下载可能是一个更好的主意。简而言之,zen的答案是你不能导出不存在的数据。也就是说,您需要以某种方式获取所有500k行。您可以将所有551483条记录作为JSON存储在JS变量中,或者存储在
    元素中,并在导出期间获取它们,但这是一个非常糟糕的主意。这就是分页的原因,以避免页面上的大量数据占用页面的加载时间。您应该向服务器使用一个API,该API将所有条目导出到一个文件中,并使用iframe下载该文件。