title: How to show save file dialog in Safari?
body: <p>I need help. I have an angular app and by using DocRaptor want to generate PDF and save it as file. But I cant trigger the dialog to save file in Safari with any method what I have found on Stack Overflow. Those methods open file in current browser tab and replace site html or open file in new tab. No one cant shows the dialog. Here the examples what I have already tried to use. Environment MacOS - EL Capitan. Safari 9.0.3</p>
  
  <p><a href="https://stackoverflow.com/a/16514741/2309309">Solution</a> #1</p>
  
  <pre><code>var content = 'file content for example';
  var blob = new Blob([ content ], { type : 'text/plain' });
  $scope.url = (window.URL || window.webkitURL).createObjectURL( blob );
  </code></pre>
  
  <p>Example <a href="https://jsfiddle.net/ZG9re/4554/" rel="nofollow noreferrer">jsfiddle</a>. Shows file in current tab. Replaces site. But works in Chrome.</p>
  
  <p><a href="https://stackoverflow.com/a/22269227/2309309">Solution</a> #2</p>
  
  <pre><code>&lt;a target="_self" href="mysite.com/uploads/ahlem.pdf" download="foo.pdf"&gt;
  </code></pre>
  
  <p>Example <a href="https://jsfiddle.net/fdrv/n6kp5bsr/" rel="nofollow noreferrer">jsfiddle</a>. Doesnt work at all in Safari. Works in Chrome.</p>
  
  <p><a href="https://stackoverflow.com/a/28541187/2309309">Solution</a> #3</p>
  
  <pre><code>&lt;a class="btn" ng-click="saveJSON()" ng-href="{{ url }}"&gt;Export to JSON&lt;/a&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$scope.saveJSON = function () {
              $scope.toJSON = '';
              $scope.toJSON = angular.toJson($scope.data);
              var blob = new Blob([$scope.toJSON], { type:"application/json;charset=utf-8;" });           
              var downloadLink = angular.element('&lt;a&gt;&lt;/a&gt;');
                          downloadLink.attr('href',window.URL.createObjectURL(blob));
                          downloadLink.attr('download', 'fileName.json');
              downloadLink[0].click();
          };
  </code></pre>
  
  <p>Example <a href="https://stackoverflow.com/a/28541187/2309309">Code Snippet</a>. Shows the file content instead of document's html.</p>
  
  <p><a href="https://stackoverflow.com/a/29339233/2309309">Solution</a> #4</p>
  
  <pre><code>function download(text, name, type) {
    var a = document.getElementById("a");
    var file = new Blob([text], {type: type});
    a.href = URL.createObjectURL(file);
    a.download = name;
  }
  </code></pre>
  
  <p>Example <a href="https://stackoverflow.com/a/29339233/2309309">Code Snippet</a>. Replace document with file content in Safari. Works in Chrome.</p>
  
  <p>And similar <a href="https://stackoverflow.com/a/30832210/2309309">Solution</a> #5</p>
  
  <pre><code>function download(text, name, type) {
      var a = document.createElement("a");
      var file = new Blob([text], {type: type});
      a.href = URL.createObjectURL(file);
      a.download = name;
      a.click();
  }
  </code></pre>
  
  <p>Example <a href="https://jsfiddle.net/fdrv/5u19fo48/1/" rel="nofollow noreferrer">jsfiddle</a>. Doesnt work at all in Safari. Works in Chrome.</p>
  
  <p>Also I have tried to use libraries like:
  <a href="https://github.com/eligrey/FileSaver.js" rel="nofollow noreferrer">FileSaver</a> - It opens file in Safari instead of document. So you should click Cmd+S. <a href="https://eligrey.com/demos/FileSaver.js/" rel="nofollow noreferrer">Example</a>. 
  If we use type 'pplication/octet-stream' the name of file will be unknown or there was be an error 'Failed to load resource: Frame load interrupted'. <a href="https://github.com/eligrey/FileSaver.js/issues/12#issuecomment-47247096" rel="nofollow noreferrer">Issue</a>. </p>
  
  <p>Second library <a href="https://github.com/dcneiner/Downloadify" rel="nofollow noreferrer">Downloadify</a> - doesnt work in Safari at all. <a href="https://github.com/dcneiner/Downloadify/issues/64" rel="nofollow noreferrer">Issue</a>.</p>
  
  <p>Angular library <a href="https://github.com/DWand/nw-fileDialog" rel="nofollow noreferrer">nw-fileDialog</a> - instead of save as it shows choose file. <a href="https://github.com/DWand/nw-fileDialog/issues/3" rel="nofollow noreferrer">Issue</a>.</p>
  
  <p>DocRaptor has own <a href="https://docraptor.com/documentation/jquery" rel="nofollow noreferrer">example</a> with jQuery.
  Example with angular in <a href="https://jsfiddle.net/fdrv/u36pgp84/" rel="nofollow noreferrer">jsfiddle</a>. It works in Chrome but in Safari example doesnt work be cause of error with SAMEORIGIN</p>
  
  <blockquote>
    <p>Refused to display '<a href="https://docraptor.com/docs" rel="nofollow noreferrer">https://docraptor.com/docs</a>' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.</p>
  </blockquote>
  
  <p>But if we reproduce it on server and change url on '<a href="https://docraptor.com/docs.pdf" rel="nofollow noreferrer">https://docraptor.com/docs.pdf</a>' it works and open file in new tab and automatically download the file so you cant choose a folder and after download user see white empty screen tab in browser. If we specify form target="_self" it will work perfect, but console will have an error 'Failed to load resource:'.</p>
  
  <p>I will appreciate any help with this problem. 
  Thanks.
  Regards.</p>