How to export dataTable in .csv format?

Question

Here What I am trying to do but not able to achieve the result.The data is getting downloaded without the '.csv' extension.

function get_modal1(data) {
  $("#popupcontent").html(data);

  var t = document.getElementById('tablename').innerText;
  $('title').html(t);

  $('#example').DataTable({
        dom: 'lBfrtip',

        buttons: [

            'csv',


        ]
    } );

this is how the data table is get exported without the extension .csv

I am not able to export the data as .csv. What I am doing wrong here? The data is getting downloaded and when I open it with notepad it is comma separated.What could be the problem here?

[1]:

Answer 1

It's a bit of a rewrite but this is what I'd do, assuming your function is what will format the data and cause the file download:

function get_modal1(_data) {
    // create a blob in memory of type text/csv
    var _blob = new Blob([_data], {type: 'text/csv'});
    var _file = "my_data.csv";

    // create an anchor in memory for the file
    var anc = document.createElement('a');
    anc.style = "display: none";

    // populate the url with the blob
    var _f_url = window.URL.createObjectURL(blob);
    anc.href = _f_url;
    anc.download = _file;

    // In case you have to support IE 11, IE 11 cannot handle dynamic click of an anchor to initiate save, so use msSaveBlob instead.
    // in any case, fire the anchor link just created... user should get the file at this point.
    if ( window.navigator.msSaveBlob ) {
       window.navigator.msSaveBlob(blob, _file);                        
    } else {
       anc.dispatchEvent(new MouseEvent('click'));
    }

    // clear url out of memory to be safe.
    window.URL.revokeObjectURL(_f_url);

 });