如何从angularjs控制器在Internet Explorer中触发“另存为”对话框

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中，这会触发“另存为”对话框，这是正确的行为，但是在Internet Explorer 10和Edge上什么也没有发生。

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

Answer 1

我认为您可以尝试修改API，并添加一种方法来获取文件Blob数据。然后，在IE和Edge浏览器中，获取文件数据后，可以使用msSaveOrOpenBlob方法在IE和Edge浏览器中下载文件，而在Chrome或Firefox浏览器中，可以创建超链接以使用以下链接下载文件网址。更多详细信息，请检查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);
            };
        };