CODEWITHSUNDEEP
javascriptcsvhtml-tabledownload
Invariance
Invariance

Reputation: 313

How to provide a download option for all the entries of a table in java script?

I have a table which look like below: enter image description here

Also, as you can see at the bottom I provided a download button for HTML to CSV but it is only providing download for the 25 entries which are visible on the page. I want to provide a download option for all the entries (551,483) to the end user. How can I do it? You can see the code I used below:

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

Upvotes: 0

Views: 102

Answers (1)

Lajos Arpad
Lajos Arpad

Reputation: 76804

Your server sends 25 items to the client-side, therefore your client-side has only 25 items. If you do not send all the items to the client-side, then you will not be able to export them without sending a request to the server. As a result, you have two options:

  1. You can send a JSON with all the data to the client-side, but this does not seem to be a very good idea, especially if the server has to send such a large chunk of data to several users at the same time (DDOS attacks will become extremely easy). Also, loading the page could take a lot of time, unnecessarily making the user wait for a while and the user will not necessarily want to export the data in all page loads, making the efforts your server is making and the UX sacrifice a self-defeating idea.

  2. The better approach in my opinion is to have an export possibility on server-side and you would request the data on demand only. This seems to be a much wiser approach.

Upvotes: 1

Related Questions