Doesn't works in Safari browsers

[vinay07-gl]

Have tested the library in all Browsers successfully except Safari. It just doesn;t works in Safari and instead opens the file directly in browser. I have to download Zip content. Is there a way to download a file from JavaScript Blob in Safari Browsers

[alferov]

@vinay07-gl, it seems like that issue has been resolved:
eligrey/FileSaver.js#242
Could you update the package to the latest version (1.1.2) and retest it?

[Lamorale]

Hi, I have tested it with version 1.1.2 on Safari and I get the same issue. Also the demo at the bottom of the page http://alferov.github.io/angular-file-saver/ opens file in the browser on Safari.

[vinay07-gl]

Hi, @Lamorale , please use below code, and it should work. Only limitation would be that the file downloaded will have no name or extension. In case of safari browser you can ask the users to name the downloaded file. In case you are still getting this error, I am guessing that you are using the Safari on Windows, because it happens only in Windows Safari, and works as i said on Mac Safari. Please note that, normally any user will only use Safari on Mac. So please once test it on any Mac machine and it should work.

req.onload = function (event, header) {
var blob = req.response;
try{
window.navigator.msSaveOrOpenBlob(blob, fileName);
}
catch(ex){
var data = new Blob([blob],{type:'application/octet-stream'});
FileSaver.saveAs(data, fileName);
}
};

[Lamorale]

Thanks for your very quick answer.
When you say "Only limitation would be that the file downloaded will have no name or extension", you mean if I get the file from the server throughout AJAX call the server should answer without "Content-Type" and "Content-Disposition" headers I guess. I cannot test it right now as I don't control the server.
Still I think
var data = new Blob(['any text here'], { type: 'text/plain;charset=utf-8' }); FileSaver.saveAs(data, 'text.txt');
should just download the file instead of opening the file in Safari (like currently on the demo page)

[ghost]

I'm currently experiencing the same issue when testing in Safari and I've tried vinay07-gl's snippet of code but that still results in the text being opened in a new tab.

JS

function ExampleCtrl(FileSaver, Blob) {
  var vm = this;
  vm.val = {
    text: 'Hey ho lets go!'
  };
  vm.download = function(text) {
    var data = new Blob([text], { type: 'text/plain;charset=utf-8' });
    FileSaver.saveAs(data, 'text.txt');
  };
 req.onload = function (event, header) {
  var blob = req.response;
  try{
     window.navigator.msSaveOrOpenBlob(blob, fileName);
  } 
  catch(ex){
    var data = new Blob([blob],{type:'application/octet-stream'});
    FileSaver.saveAs(data, fileName);
   }
};
}
angular
  .module('fileSaverExample', ['ngFileSaver'])
  .controller('ExampleCtrl', ['FileSaver', 'Blob', ExampleCtrl]);

Maybe I'm placing the snippet in the wrong place?

HTML

<div class="wrapper" ng-controller="ExampleCtrl as vm">
  <textarea
    ng-model="vm.val.text"
    name="textarea" rows="5" cols="20">
      Hey ho let's go!
  </textarea>
  <a href="" class="btn btn-dark btn-small" ng-click="vm.download(vm.val.text)">
    Download
  </a>
</div>

[stevehealy]

@vinay07-gl Your code snippet breaks IE - nothing happens.

[Head]

Any news on that? I've tried 1.1.3 and type application/octet-stream, both didn't work.

[gillez]

I know this is an old thread but the problem still occurs on Safari 11 and 12 on MacOS. However, you only see the problem in a pinned tab.

Try pinning http://alferov.github.io/angular-file-saver/ on Safari 11/12 then click the download button in the Demo.

FWIW, I think this is a Safari bug. I have been trying to find a workaround but haven't found one yet. Setting mimetype to "application/octet-stream" does download the file, however it always has the filename "unknown.txt" or "unknown.dms" which is a very big (show stopping) limitation. The only real workaround I have is to tell our users not to pin the tab but this is not really an acceptable solution.