[Enhancement]Change Name of Download when using exportCSV()

[yavoan]

When using exportCSV() with the DataTable for example like this <button (click)="dt.exportCSV()" label="CSV" > Export

The downloaded file is just called "download" without any extension. At the very least a CSV extension would be appreciated or perhaps you can name it yourself in the html. Any help would great thanks

Something like this could be useful. Data here being the CSV variable that you call encodeURI on in the exportData function This would make it so that you could change the name by passing a variable into the function and changing the my_data.csv to that variable.

   `var encodedUri = encodeURI(data); `
  `var link = document.createElement("a"); `
  ` link.setAttribute("href", encodedUri); `
   `link.setAttribute("download", "my_data.csv"); `
   `document.body.appendChild(link); `
   `link.click(); `

[cheng1994]

You can edit datatable.js in node_modules/primeng/components/datatable to include naming a file. you can then pass the filename as an argument. Not ideal since updating will overwrite this but its a fix until they add a solution.

DataTable.prototype.exportCSV = function (filename) {
        var _this = this;
        var data = this.value, csv = "data:text/csv;charset=utf-8,", tempCsv = "";

        //headers
        for (var i = 0; i < this.columns.length; i++) {
            if (this.columns[i].field) {
                tempCsv += this.columns[i].field;
                if (i < (this.columns.length - 1)) {
                    tempCsv += this.csvSeparator;
                }
            }
        }
        //body        
        this.value.forEach(function (record, i) {
            tempCsv += '\n';
            for (var i_1 = 0; i_1 < _this.columns.length; i_1++) {
                if (_this.columns[i_1].field) {
                    tempCsv += _this.resolveFieldData(record, _this.columns[i_1].field);
                    if (i_1 < (_this.columns.length - 1)) {
                        tempCsv += _this.csvSeparator;
                    }
                }
            }
        });
        var a = document.createElement('a');
        if (typeof a.download != "undefined") {
            var link = document.createElement("a");
            link.setAttribute("href", encodeURI(csv += tempCsv)); 
            link.setAttribute("download", filename + ".csv"); 
            document.body.appendChild(link); 
            link.click(); 
        } else {
            if(navigator.msSaveBlob) {
                var fileData = tempCsv;
                console.log(fileData);
                blobObject = new Blob(fileData);
                navigator.msSaveBlob(blobObject, filename + ".csv");
            } else {
                window.open(encodeURI(csv));
            }

        }   
    };

[nareshurs]

We are planning to use primeng dataTable in our project and looking for this feature. Is there any progress on this enhancement? There should be a way to pass filename instead of default name.

[gilhanan]

<p-dataTable exportFilename="yourfilename">

[cagataycivici]

Yes, exportFilename is for this.

[jespergothe]

It took me a while to understand I could actually bind exportfilename to a property in my component. That way I can change it depending on choices made in the user interface. dynamicExportFileName is my own property and the value is generated from a class method/function.

<p-dataTable #dt tableStyleClass="ibox-content" [value]="fetchedDeliveries" [loading]="loading" [rows]="20" [rowsPerPageOptions]="[20,50,100]"
    [paginator]="true" [pageLinks]="3" [editable]="false" exportFilename="{{dynamicExportFileName}}">

I am on primeng-6.0.0-alpha

[RaghuRangaraj]

Hi All,

Need an help on primeNg p-table export to CSV feature. I am able to export only the data that are visible on that page not the data that are present in next page. I am using dt.exportCSV function.

Help is appreciated