Saving text in a local file in Internet Explorer 10

I need to be able to save a string into a local file. Based on the code in here I got the following going:

function saveTextAsFile(fileNameToSaveAs, textToWrite) {
var textFileAsBlob = new Blob([textToWrite], {
    type: 'text/plain'
});

var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";

if (true) { //window.webkitURL !== null) {
    // Chrome allows the link to be clicked
    // without actually adding it to the DOM.
    downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
} else {
    // Firefox requires the link to be added to the DOM
    // before it can be clicked.
    downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
}

downloadLink.click();
}

This works fine for Chrome and Firefox, but not for Internet Explorer 10 as

downloadLink.click();

gives:

SCRIPT5: Access is denied.

Is there any explanation/solution to this ?

thanks!

Answers:

Answer

IE 10 and 11 use a distinct syntax for downloading or saving blobs to the client machine. Once you've created a blob, use:

window.navigator.msSaveBlob(blob, 'file.txt'); 

or

window.navigator.msSaveOrOpenBlob(blob, 'file.txt');

to trigger the file save or file save/open dialog.

For more info, see http://msdn.microsoft.com/en-us/library/ie/hh673542(v=vs.85).aspx

Answer

Thx to mstubna, here is a solution for Chrome, FF, and IE>9:

function saveTextAsFile(fileNameToSaveAs, textToWrite) {
  /* Saves a text string as a blob file*/  
  var ie = navigator.userAgent.match(/MSIE\s([\d.]+)/),
      ie11 = navigator.userAgent.match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/),
      ieEDGE = navigator.userAgent.match(/Edge/g),
      ieVer=(ie ? ie[1] : (ie11 ? 11 : (ieEDGE ? 12 : -1)));

  if (ie && ieVer<10) {
    console.log("No blobs on IE ver<10");
    return;
  }

  var textFileAsBlob = new Blob([textToWrite], {
    type: 'text/plain'
  });

  if (ieVer>-1) {
    window.navigator.msSaveBlob(textFileAsBlob, fileNameToSaveAs);

  } else {
    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
    downloadLink.onclick = function(e) { document.body.removeChild(e.target); };
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
    downloadLink.click();
  }
}
Answer

For modern browsers solution goes like this, tested: IE11, FF & Chrome

var csvData = new Blob([arg.data], {type: 'text/csv;charset=utf-8;'});
//IE11 & Edge
if (navigator.msSaveBlob) {
	navigator.msSaveBlob(csvData, exportFilename);
} else {
	//In FF link must be added to DOM to be clicked
	var link = document.createElement('a');
	link.href = window.URL.createObjectURL(csvData);
	link.setAttribute('download', exportFilename);
	document.body.appendChild(link);	
	link.click();
	document.body.removeChild(link);	
}

Answer

plus for ie EDGE:

var ieEDGE = navigator.userAgent.match(/Edge/g);
if (ie || ie11 || ieEDGE) {
    if (ieVer>9 || ieEDGE) {
        var textFileAsBlob = new Blob([textToWrite], {
            type: 'text/plain'
        });
        window.navigator.msSaveBlob(textFileAsBlob, fileName);
    } else {
        console.log("No supported on IE ver<10");
    }
} else { ... }
Answer

You can use FileSaver library to achieve that. Easy to use, takes care of browser types and versions. There is an AngularJS version available as well.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.