如何显示保存在Safari文件对话框？ [英] How to show save file dialog in Safari?

问题描述

我需要帮助。我有一个角度应用程序，并通过使用DocRaptor想生成PDF文件，并​​保存为文件。但我不能触发对话框保存文件在Safari与我有什么对堆栈溢出发现的方法。这些方法在目前的浏览器标签页中打开文件，并替换网站HTML或在新标签中打开文件。没有人斜面显示对话框。在这里，我已经尝试过的例子来使用。环境的MacOS - 埃尔卡皮坦。 Safari浏览器9.0.3

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

解决方案＃1

var content = 'file content for example';
var blob = new Blob([ content ], { type : 'text/plain' });
$scope.url = (window.URL || window.webkitURL).createObjectURL( blob );

的jsfiddle 。显示当前选项卡的文件。替换网站。但工作在Chrome浏览器。

Example jsfiddle. Shows file in current tab. Replaces site. But works in Chrome.

解决方案＃2

<a target="_self" href="mysite.com/uploads/ahlem.pdf" download="foo.pdf">

的jsfiddle 。不工作都在Safari。作品在Chrome中。

Example jsfiddle. Doesnt work at all in Safari. Works in Chrome.

解决方案＃3

<a class="btn" ng-click="saveJSON()" ng-href="{{ url }}">Export to JSON</a>

和

$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('<a></a>');
                        downloadLink.attr('href',window.URL.createObjectURL(blob));
                        downloadLink.attr('download', 'fileName.json');
            downloadLink[0].click();
        };

code片段。显示文件内容，而不是文件的HTML。

Example Code Snippet. Shows the file content instead of document's html.

解决方案＃4

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片段。用Safari浏览器中的文件内容替换文件。作品在Chrome中。

Example Code Snippet. Replace document with file content in Safari. Works in Chrome.

和类似解决方案＃5

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();
}

的jsfiddle 。不工作都在Safari。作品在Chrome中。

Example jsfiddle. Doesnt work at all in Safari. Works in Chrome.

此外，我曾尝试使用库，例如​​：
FileSaver - 它打开文件，在Safari中，而不是文件。所以，你应该单击cmd + S。 为例。
如果我们使用类型pplication /八位字节流文件的名称将是未知的或有是一个错误无法加载资源：帧负载中断。 问题。

Also I have tried to use libraries like: FileSaver - It opens file in Safari instead of document. So you should click Cmd+S. Example. 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'. Issue.

二库 Downloadify - 犯规在Safari在所有的工作。 问题。

Second library Downloadify - doesnt work in Safari at all. Issue.

角库 NW-FileDialog的 - 而不是保存，因为它显示选择文件。 问题。

Angular library nw-fileDialog - instead of save as it shows choose file. Issue.

DocRaptor有自己的例如使用jQuery 的。
例如在的jsfiddle 角。它工作在Chrome，但在Safari例如不工作与SAMEORIGIN错误原因

DocRaptor has own example with jQuery. Example with angular in jsfiddle. It works in Chrome but in Safari example doesnt work be cause of error with SAMEORIGIN

拒绝显示 https://docraptor.com/docs 在一个框架，因为它集'X -frame选项到SAMEORIGIN。

Refused to display 'https://docraptor.com/docs' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

但是，如果我们重现它在服务器和变更网址上的 https://docraptor.com/docs.pdf 它的工作原理，并在新标签中打开文件，并自动下载文件，因此你不能选择一个文件夹，用户下载后看到浏览器的白色空白屏幕选项卡。如果我们指定形式的目标=_自我，将工作完美，但控制台将有一个错误无法加载的资源：

But if we reproduce it on server and change url on 'https://docraptor.com/docs.pdf' 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:'.

我将AP preciate这个问题的任何帮助。
谢谢。
问候。

I will appreciate any help with this problem. Thanks. Regards.

推荐答案

在理想情况下，解决方案2将是答案，但下载属性的还没有跨浏览器支持。

Ideally, Solution #2 would be the answer, but the download attribute does not yet have cross-browser support.

所以，你必须使用＆LT;形式为GT; 以创建下载。正如你提到的，DocRaptor的 jQuery的例子使用这种技术。

So you have to use a <form> to create the download. As you noted, DocRaptor's jQuery example uses this technique.

该SAMEORIGIN错误实际上是因为的jsfiddle运行code与原籍设置一个iFrame。如果您从您的角度应用程序运行这个直，你不应该有任何问题。

The SAMEORIGIN error is actually because JSFiddle is running the code in an iFrame with their origin settings. If you run this straight from your Angular application, you shouldn't have any problems.

这篇关于如何显示保存在Safari文件对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！