Javascript 如何在java脚本中为表的所有条目提供下载选项?
我有一张如下所示的桌子: 此外,正如您在底部看到的,我提供了一个从HTML到CSV的下载按钮,但它只提供了页面上可见的25个条目的下载。我想为最终用户提供所有条目(551483)的下载选项。我怎么做?您可以在下面看到我使用的代码: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
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个项目。如果不将所有项目发送到客户端,则在不向服务器发送请求的情况下将无法导出这些项目。因此,您有两个选择:
您必须从服务器获取所有行的内容。在服务器上准备下载可能是一个更好的主意。简而言之,zen的答案是你不能导出不存在的数据。也就是说,您需要以某种方式获取所有500k行。您可以将所有551483条记录作为JSON存储在JS变量中,或者存储在
元素中,并在导出期间获取它们,但这是一个非常糟糕的主意。这就是分页的原因,以避免页面上的大量数据占用页面的加载时间。您应该向服务器使用一个API,该API将所有条目导出到一个文件中,并使用iframe下载该文件。