Javascript/ jQuery : Exporting data in CSV not working in IE

Question

I need to Export Data displayed in a Table to CSV Format. I have tried lot many things but couldn\'t get it working for IE 9 and above.

I have created a dummy fiddle

Answer 1

For IE 10+ you can do:

var a = document.createElement('a');
        if(window.navigator.msSaveOrOpenBlob){
            var fileData = str;
            blobObject = new Blob([str]);
            a.onclick=function(){
                window.navigator.msSaveOrOpenBlob(blobObject, 'MyFile.csv');
            }
        }
        a.appendChild(document.createTextNode('Click to Download'));
        document.body.appendChild(a);

I don't believe it to be possible in earlier versions of IE. Without invoking the activeX object, but if that's acceptable you could use:

var sfo=new ActiveXObject('scripting.FileSystemObject');
var fLoc=sfo.CreateTextFile('MyFile.csv');
fLoc.WriteLine(str);
fLoc.close();

Which would write the file directly to the user's file system. This will however generally prompt the user asking if they want to allow the script to run. The prompt can be disabled in an intranet environment.

Answer 2

After using Javascript it will solve your problem.

Use this for IE,

var IEwindow = window.open();
IEwindow.document.write('sep=,\r\n' + CSV);
IEwindow.document.close();
IEwindow.document.execCommand('SaveAs', true, fileName + ".csv");
IEwindow.close();

For more information i have written tutorial on that, see - Download JSON data in CSV format Cross Browser Support

Hope this will be helpful for you.

Answer 3

I got the solution for it which is supporting IE 8+ for me. We need to specify the separator as shown below.

if (navigator.appName == "Microsoft Internet Explorer") {    
    var oWin = window.open();
    oWin.document.write('sep=,\r\n' + CSV);
    oWin.document.close();
    oWin.document.execCommand('SaveAs', true, fileName + ".csv");
    oWin.close();
  }  

You can go through the link http://andrew-b.com/view/article/44

Answer 4

use Blob object Create a blob object and use msSaveBlob or msSaveOrOpenBlob The code is working in IE11 (not tested for other browsers)

    <script>


 var csvString ='csv,object,file';
    var blobObject = new Blob(csvString); 

        window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt'); // The user only has the option of clicking the Save button.
        alert('note the single "Save" button below.');

        var fileData = ["Data to be written in file."];
    //csv string object inside "[]"
        blobObject = new Blob(fileData);
        window.navigator.msSaveOrOpenBlob(blobObject, 'msSaveBlobOrOpenBlob_testFile.txt'); // Now the user will have the option of clicking the Save button and the Open button.`enter code here`
        alert('File save request made using msSaveOrOpenBlob() - note the two "Open" and "Save" buttons below.');
      </script>

Answer 5

This will work on any browser, without the need of jQuery.

1. Add the following iframe anywhere in your page:

   <iframe id="CsvExpFrame" style="display: none"></iframe>

2. Give an id to the table in the page you want to export:

   <table id="dataTable">

3. Customize your link or button to call the ExportToCsv function, passing the default file name and the id of table as parameters. For example:

   <input type="button" onclick="ExportToCsv('DefaultFileName','dataTable')"/>

4. Add this to your JavaScript file or section:

function ExportToCsv(fileName, tableName) {
  var data = GetCellValues(tableName);
  var csv = ConvertToCsv(data);
  if (navigator.userAgent.search("Trident") >= 0) {
    window.CsvExpFrame.document.open("text/html", "replace");
    window.CsvExpFrame.document.write(csv);
    window.CsvExpFrame.document.close();
    window.CsvExpFrame.focus();
    window.CsvExpFrame.document.execCommand('SaveAs', true, fileName + ".csv");
  } else {
    var uri = "data:text/csv;charset=utf-8," + escape(csv);
    var downloadLink = document.createElement("a");
    downloadLink.href = uri;
    downloadLink.download = fileName + ".csv";
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  }
};

function GetCellValues(tableName) {
  var table = document.getElementById(tableName);
  var tableArray = [];
  for (var r = 0, n = table.rows.length; r < n; r++) {
    tableArray[r] = [];
    for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
      var text = table.rows[r].cells[c].textContent || table.rows[r].cells[c].innerText;
      tableArray[r][c] = text.trim();
    }
  }
  return tableArray;
}

function ConvertToCsv(objArray) {
  var array = typeof objArray != "object" ? JSON.parse(objArray) : objArray;
  var str = "sep=,\r\n";
  var line = "";
  var index;
  var value;
  for (var i = 0; i < array.length; i++) {
    line = "";
    var array1 = array[i];
    for (index in array1) {
      if (array1.hasOwnProperty(index)) {
        value = array1[index] + "";
        line += "\"" + value.replace(/"/g, "\"\"") + "\",";
      }
    }
    line = line.slice(0, -1);
    str += line + "\r\n";
  }
  return str;
};

<table id="dataTable">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Andrew</td>
    <td>20</td>
    <td>andrew@me.com</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>32</td>
    <td>bob@me.com</td>
  </tr>
  <tr>
    <td>Sarah</td>
    <td>19</td>
    <td>sarah@me.com</td>
  </tr>
  <tr>
    <td>Anne</td>
    <td>25</td>
    <td>anne@me.com</td>
  </tr>
</table>

<a href="#" onclick="ExportToCsv('DefaultFileName', 'dataTable');return true;">Click this to download a .csv</a>

Answer 6

This is also one of the answers which I used and working great for IE 10+ versions :

var csv = JSON2CSV(json_obj);            
var blob = new Blob([csv],{type: "text/csv;charset=utf-8;"});

if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, "fileName.csv")
    } else {
        var link = document.createElement("a");
        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", "fileName.csv");
            link.style = "visibility:hidden";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }           
    }

Hope this helps.