IE9 - no way to save the results of CSV export

[alexandery]

Clicking the link that gets generated by the grid results in navigation to an empty page in IE9 - no way to save the file even from the context menu "Save Target As...". Firefox prompts you to save the file.

[PaulL1]

Unfortunately I don't have an IE install to diagnose on. Does it give you any errors or information as to why it's not working?

[alexandery]

Paul,

There is no error. It does generate the link as expected, but the link does not allow the content to be downloaded in IE. Clicking on it just redirects browser to an empty page.

I did look around and found this article: http://andrew-b.com/view/article/44 , with the code that gives you an idea as to how to go about CSV saving with IE:

//Save file
if (navigator.appName == "Microsoft Internet Explorer") {

    //Optional: If you run into delimiter issues (where the commas are not interpreted and all data is one cell), then use this line to manually specify the delimeter

     tableString = 'sep=,\r\n' + tableString;

     myFrame.document.open("text/html", "replace");
     myFrame.document.write(tableString);
     myFrame.document.close();
     myFrame.focus();
     myFrame.document.execCommand('SaveAs', true, 'data.csv');
 } else {

    csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(tableString);
     $(event.target).attr({
         'href': csvData,
         'target': '_blank',
         'download': 'my_data.csv'
     });

 }

And then there are posts like this: http://stackoverflow.com/a/24505999 which talk about Opera issues.

Hope this helps. Let me know if you need any other information.

Thanks!

[PaulL1]

I have recently updated the csv download to avoid the link click entirely. I think the code I used was IE aware as well. Could you review and see if this is still occurring?

[alexandery]

@PaulL1,

Thanks for the update. I've tried the latest unstable version today (v3.0.0-RC.18-f8a68cc). Unfortunately the export functionality doesn't seem to work for IE9 still. Upon exporting IE9 pops up a new, completely empty window.

The code generates CSV data, but when it gets to 'downloadFile' method, the execution gets to lines 14081-14082 and continues from there.

Would appreciate any pointers or suggestions on how to go about testing and figuring out what's wrong there.

Thanks!

[PaulL1]

@alexandery: what is at lines 14081-14082? I did some changes on downloadFile a few days ago, but I doubt they fixed it. If you can tell me what line it is in that the error occurs, I can have a look.

[alexandery]

@PaulL1 Well, I thought you could check the file to get the content of the lines. However, I have implemented the feature myself. I hope you can integrate this into the component to make sure that others can use it (and that I won't need to apply these changes next time I upgrade).

Below is the code to implement it on IE9 (possibly below as well). All of it goes into ui.grid.exporter.

• New method to check for IE version

        /**
         * @ngdoc function
         * @name isIE
         * @methodOf  ui.grid.exporter.service:uiGridExporterService
         * @description Checks whether current browser is IE and returns it's version if it is
        */
        isIE: function () {
            var myNav = navigator.userAgent.toLowerCase();
            return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
        }

• Modified downloadFile() method

downloadFile: function (fileName, csvContent) {
  var D = document;
  var a = D.createElement('a');
  var strMimeType = 'application/octet-stream;charset=utf-8';
  var rawFile;

  if (!fileName) {
    var currentDate = new Date();
    fileName = "CWS Export - " + currentDate.getFullYear() + (currentDate.getMonth() + 1) +
                  currentDate.getDate() + currentDate.getHours() +
                  currentDate.getMinutes() + currentDate.getSeconds() + ".csv";
  }

  if (this.isIE() < 10) {
    var frame = D.createElement('iframe');
    document.body.appendChild(frame);

    frame.contentWindow.document.open("text/html", "replace");
    frame.contentWindow.document.write('sep=,\r\n' + csvContent);
    frame.contentWindow.document.close();
    frame.contentWindow.focus();
    frame.contentWindow.document.execCommand('SaveAs', true, fileName);

    document.body.removeChild(frame);
    return true;
  }

  // IE10+
  if (navigator.msSaveBlob) {
    return navigator.msSaveBlob(new Blob(["\ufeff", csvContent], {
      type: strMimeType
    }), fileName);
  }

  //html5 A[download]
  if ('download' in a) {
    var blob = new Blob([csvContent], {
      type: strMimeType
    });
    rawFile = URL.createObjectURL(blob);
    a.setAttribute('download', fileName);
  } else {
    rawFile = 'data:' + strMimeType + ',' + encodeURIComponent(csvContent);
    a.setAttribute('target', '_blank');
    a.setAttribute('download', fileName);
  }


  a.href = rawFile;
  a.setAttribute('style', 'display:none;');
  D.body.appendChild(a);
  setTimeout(function() {
    if (a.click) {
      a.click();
      // Workaround for Safari 5
    } else if (document.createEvent) {
      var eventObj = document.createEvent('MouseEvents');
      eventObj.initEvent('click', true, true);
      a.dispatchEvent(eventObj);
    }
    D.body.removeChild(a);

  }, 100);
}

• Need to make sure that the following CSS is applied because it seems that adding and removing an iFrame changes browser width a little which triggers a bug in ui-grid - ui-grid-viewport gets pushed below by the row header checkmarks:

.ui-grid-viewport {
     width: auto !important;
}

[alexandery]

@PaulL1 Have you seen this yet? There is no reply from you.

[PaulL1]

@alexandery : I have applied the changes as you provided. However, I cannot test (I don't have any IE), and I couldn't apply the css change as that breaks the all features tutorial. Is there an alternative to that change that doesn't have an impact on other browsers?