execCommand（'SaveAs'，true，'data.csv'）; 在IE中无法正常工作

Question

I'm using AngularJS with ng-grid. The CSV export plugin for ng-grid doesn't play nicely with IE, so we built a workaround using an iframe to grab the csv data and download. However, the exeCommand function only saves as a text file, even when specifying a filename suffix of .csv. All the data is in the text file, and when converted to a csv it works fine, but we need this file to download as a .csv from the start.

I did find this MS bug that may be the source of the issue - curious if anyone can think of a solution: https://support.microsoft.com/en-us/kb/929863

Thanks!

Code in question:

function ngGridCsvExportPlugin (opts) {
    var self = this;
    self.grid = null;
    self.scope = null;
    self.init = function(scope, grid, services) {
        self.grid = grid;
        self.scope = scope;
        function showDs() {
            var keys = [];
            // setup our map index of `field`: `displayName`
            var keyNames = {};
            for (var f in grid.config.columnDefs) { keys.push(grid.config.columnDefs[f].field);}

            // build a map of field i.e. {metric_name: "Metric Name", age: "Age"}
            for (var f in grid.config.columnDefs) {
                keyNames[grid.config.columnDefs[f].field] = grid.config.columnDefs[f].displayName;
            }
            var getCsvFileForIE = function(target) {
                var csvData = target.attributes["data-csv"].value;
                if ( ! supportsDataUri() ) {
                    csvData = decodeURIComponent(csvData);

                    var iframe = document.getElementById('csvDownloadFrame');
                    iframe = iframe.contentWindow || iframe.contentDocument;

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

                    iframe.document.open("text/html", "replace");
                    iframe.document.write(csvData);
                    iframe.document.close();
                    iframe.focus();
                    iframe.document.execCommand('SaveAs', true, 'data.csv');
                } else {
                    if (console && console.log) {
                        console.log('Trying to call getCsvFileForIE with non IE browser.');
                    }
                }
            };

            var supportsDataUri = function() {
                var isOldIE = navigator.appName === "Microsoft Internet Explorer";
                var isIE11 = !!navigator.userAgent.match(/Trident\/7\./);
                return ! (isOldIE || isIE11);  //Return true if not any IE
            };
            var csvData = '';
            function csvStringify(str) {
                if (str == null) { // we want to catch anything null-ish, hence just == not ===
                    return '';
                }
                if (typeof(str) === 'number') {
                    return '' + str;
                }
                if (typeof(str) === 'boolean') {
                    return (str ? 'TRUE' : 'FALSE') ;
                }
                if (typeof(str) === 'string') {
                    return str.replace(/"/g,'""');
                }

                return JSON.stringify(str).replace(/"/g,'""');
            }
            function swapLastCommaForNewline(str) {
                var newStr = str.substr(0,str.length - 1);
                return newStr + "\n";
            }
            for (var k in keys) {
                // unwrap our mapping dictionary
                csvData += '"' + csvStringify(keyNames[keys[k]]) + '",';
            }
            csvData = swapLastCommaForNewline(csvData);
            var gridData = grid.data;

            for (var gridRow in gridData) {
                for ( k in keys) {
                    var curCellRaw;
                    if (opts != null && opts.columnOverrides != null && opts.columnOverrides[keys[k]] != null) {
                        curCellRaw = opts.columnOverrides[keys[k]](gridData[gridRow][keys[k]]);
                    //dbogart added this to handle null cases
                    } else if (gridData[gridRow] === null) {
                        curCellRaw = '';
                    } else {
                        curCellRaw = gridData[gridRow][keys[k]];
                    }
                    csvData += '"' + csvStringify(curCellRaw) + '",';
                }
                csvData = swapLastCommaForNewline(csvData);
            }
            var fp = grid.$root.find(".ng-grid-buttons");
            var csvDataLinkPrevious = grid.$root.find('.ng-grid-buttons .csv-data-link-span');
            if (csvDataLinkPrevious != null) {csvDataLinkPrevious.remove() ; }
            var csvDataLinkHtml = "<div class='ngHeaderButton2'></div><span class=\"csv-data-link-span\">";
            //csvDataLinkHtml += "<a class ='exportLink' href=\"data:text/csv;charset=UTF-8,";
            //csvDataLinkHtml += encodeURIComponent(csvData);
            //csvDataLinkHtml += "\" download=\"Export.csv\"><i class='fa fa-file-excel-o excel-icon'></i></a></span>" ;
            csvDataLinkHtml += " <a ";
            if ( ! supportsDataUri()  ) {
                csvDataLinkHtml += " data-csv=\"";
                csvDataLinkHtml += encodeURIComponent(csvData);
                csvDataLinkHtml += "\" onclick='getCsvFileForIE(this);' >";
            } else {
                csvDataLinkHtml += "href=\"data:text/csv;charset=UTF-8,";
                csvDataLinkHtml += encodeURIComponent(csvData);
                csvDataLinkHtml += "\" download=\"Export.csv\">";
            }
            csvDataLinkHtml += "<i class='fa fa-file-excel-o excel-icon'></i></a></span>" ; //End csv-data-link-span

            //csvDataLinkHtml += "CSV Export</a> &nbsp;&nbsp;";

            //csvDataLinkHtml += "</br></span>"; //End csv-data-link-span
            fp.append(csvDataLinkHtml);
        }
        setTimeout(showDs, 0);
        scope.catHashKeys = function() {
            var hash = '';
            for (var idx in scope.renderedRows) {
                hash += scope.renderedRows[idx].$$hashKey;
            }
            return hash;
        };
        scope.$watch('catHashKeys()', showDs);
    };
}

function getCsvFileForIE(target) {
    var csvData = target.attributes["data-csv"].value;
    if ( ! supportsDataUri() ) {
        csvData = decodeURIComponent(csvData);

        var iframe = document.getElementById('csvDownloadFrame');
        iframe = iframe.contentWindow || iframe.contentDocument;

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

        iframe.document.open("text/html", "replace");
        iframe.document.write(csvData);
        iframe.document.close();
        iframe.focus();
        iframe.document.execCommand('SaveAs', true, 'data.csv');
    } else {
        if (console && console.log) {
            console.log('Trying to call getCsvFileForIE with non IE browser.');
        }
    }
};

function supportsDataUri() {
    var isOldIE = navigator.appName === "Microsoft Internet Explorer";
    var isIE11 = !!navigator.userAgent.match(/Trident\/7\./);
    return ! (isOldIE || isIE11);  //Return true if not any IE
};

Answer 1

This works for me on Windows 7 IE 11, see https://stackoverflow.com/a/24417650/1198657

if (window.navigator.msSaveOrOpenBlob) {
  blobObject = new Blob([csvData]);
  window.navigator.msSaveOrOpenBlob(blobObject, 'Export.csv');
}

Answer 2

I was actually having the same problem, but after looking into the source code for ui-grid (in the ui-grid.js file), I found that the version check of IE wasn't working correctly

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

      //Check if IE9 or below
      ieVersion = this.isIE();
      if (ieVersion && ieVersion < 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.msSaveOrOpenBlob(
          new Blob(
            [exporterOlderExcelCompatibility ? "\uFEFF" : '', csvContent],
            { type: strMimeType } ),
          fileName
        );
      }

So the ieVersion was returning true (which apparently in JS is less than 10...)

Since I was looking for it to work in 11, I was able to comment this out and it worked fine! But if you need it to work below 9, you can switch the order of these two functions. The code is correct on the ui-grid.info site as of 6/3/2016