如何在Safari中显示保存文件对话框？

我需要帮助。 我有一个角度的应用程序，并通过使用DocRaptor想要生成PDF并将其保存为文件。 但我不能触发对话框在Safari中使用我在堆栈溢出中找到的任何方法保存文件。 这些方法在当前浏览器选项卡中打开文件，并替换网站html或在新选项卡中打开文件。 没有人不能显示对话框。 这里是我已经尝试使用的例子。 环境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中工作。

解决方案＃2

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

示例jsfiddle。 在Safari中完全不工作。 适用于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();
        };

示例代码片段。 显示文件内容而不是文档的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;
}

示例代码片段。 在Safari中将文档替换为文件内容。 适用于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。

此外，我尝试使用如下库：FileSaver - 它在Safari中而不是文档中打开文件。 所以你应该点击Cmd + S。 例。 如果我们使用'pplication / octet-stream'类型，那么文件的名称将是未知的，或者出现'加载资源失败：帧加载中断'错误。 问题。

第二个库Downloadify - 在Safari中根本不起作用。 问题。

Angular library nw-fileDialog - 而不是保存，因为它显示选择文件。 问题。

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

拒绝在框架中显示'https://docraptor.com/docs'，因为它将'X-Frame-Options'设置为'SAMEORIGIN'。

但是，如果我们在服务器上重现它，并在'https://docraptor.com/docs.pdf'上更改网址，它将起作用，并在新选项卡中打开文件，并自动下载文件，以便您不能选择文件夹，下载后用户看到空白浏览器中的屏幕标签。 如果我们指定表单目标=“_ self”，它将工作完美，但控制台将有一个错误'无法加载资源：'。

我将不胜感激这个问题的任何帮助。 谢谢。 问候。

---

尝试使用Blob文件：

// Buffer can be response from XMLHttpRequest/Ajax or your custom Int32 data
function download(buffer, filename) {
  var file = new Blob([buffer], {
    type: 'application/octet-stream' // Replace your mimeType if known
  });
  var fileReader = new FileReader();

  fileReader.onloadend = function(e) {
    var converted = e.target.result;
    converted.name = filename;
    converted.webkitRelativePath = filename;

    var iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
    iframe.src = converted;
  };
  fileReader.onerror = function(e) {
    throw new Error('Something is wrong with buffer data');
  };
  fileReader.file = file;
  fileReader.readAsDataURL(file);
}

它基本上使用filebuffer并将其作为iframe内容下载。 请务必勾选正确的MIME类型，以便Safari安全系统将收到分析文件类型。

---

理想情况下，解决方案2将是答案，但下载属性尚未支持跨浏览器。

所以你必须使用<form>创建下载。 正如您所指出的，DocRaptor的jQuery示例使用了这种技术。

SAMEORIGIN错误实际上是因为JSFiddle以其原始设置在iFrame中运行代码。 如果您从Angular应用程序直接运行此应用程序，则不会有任何问题。

链接地址: http://www.djcxy.com/p/44709.html

上一篇: How to show save file dialog in Safari?

下一篇: How does browsers handle DNS lookup and TLS with WebSockets?