如何从 angularjs 控制器触发 Internet Explorer 中的 "Save As" 对话框

Question

我有一个 angularjs 控制器，它从休息端点检索 URL。响应包含 S3 上文本文件的 URL，并使用该文件的内容填充隐藏 iframe 的 src 属性。

模板

<div>
    <button ng-click="myCtrl.getUrl()" class="btn btn-default"></button>
    <iframe ng-hide="true" ng-src="{{myCtrl.s3Link}}"></iframe>
</div>

控制器

angular
  .module('app')
  .component('myComponent', {
    templateUrl: 'template.html',
    controller: MyController,
    controllerAs: 'myCtrl'
  });

function MyController($http, $sce) {
  var vm = this;
  var savedState = browserBackService.retrieveState('resultsPage');
  vm.getUrl = getUrl;
  vm.s3Link = '';

  function getUrl() {
    vm.extractDownloadLink = '';
    $http.get('/api/getS3url').then(extractSuccessCallback);
  }

  function extractSuccessCallback(response) {
    vm.extractDownloadLink = $sce.trustAsResourceUrl(response.data.url);
  }
}

休息反应

{
  "url":"https://myaws.aws.net/s3_bucket/1/2/myFile.txt"
}

文件存在，路径正确。在 Chrome 和 Firefox 中，这会触发一个 "Save As" 对话框，这是正确的行为，但在 Internet Explorer 10 和 Edge 上，没有任何反应。

需要进行哪些更改才能在 IE 中成功完成此操作？

Answer 1

考虑使用可处理多种浏览器的库，例如 angular-file-saver

Angular File Saver

Answer 2

无法使用您的代码重现问题，我想您可能正在使用 URL.createObjectURL() 方法或标签下载属性来下载文件，或类似这样。而且他们不支持IE浏览器。

在我看来，我建议您可以尝试修改 API，并添加一个获取文件 blob 数据的方法。然后，在IE和Edge浏览器中，获取文件数据后，可以在IE和Edge浏览器中使用msSaveOrOpenBlob方法下载文件，在Chrome或Firefox浏览器中，可以创建超链接下载使用 URL 的文件。更多详细信息，请查看this sample:

        function btnAttachFileDownload() {

            let fileUpload = $('input#fileUpload');
            let fileName = fileUpload[0].files[0].name;
            let fileSize = fileUpload[0].files[0].size;

            var reader = new FileReader();
            reader.readAsDataURL(fileUpload[0].files[0]);
            reader.onload = function () {
                var blob = b64toBlob(reader.result);
                if (window.navigator.msSaveOrOpenBlob) {
                    console.log('IE 11');
                    // IE 11 the legacy version of Microsoft Edge
                    window.navigator.msSaveOrOpenBlob(blob, fileName);
                } else {
                    console.log('Google chome, Firefox, ....');
                    // Google chome, Firefox, ....
                    var url = (window.URL || window.webkitURL).createObjectURL(blob);
                    $('#filedownload').attr('download', fileName);
                    $('#filedownload').attr('href', url);
                    $('#filedownload')[0].click();
                }
            };
            reader.onerror = function (error) {
                console.log('Error: ' + error);
            };
        };

如何从 angularjs 控制器触发 Internet Explorer 中的 "Save As" 对话框

How to trigger the "Save As" dialog in Internet Explorer from an angularjs controller

angularjs

internet-explorer-11

microsoft-edge