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

【问题标题】：How to trigger the "Save As" dialog in Internet Explorer from an angularjs controller如何从 angularjs 控制器触发 Internet Explorer 中的“另存为”对话框
【发布时间】：2020-04-07 14:45:06
【问题描述】：

我有一个 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 中成功完成？

【问题讨论】：

标签： angularjs internet-explorer-11 microsoft-edge

【解决方案1】：

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

Angular File Saver

【讨论】：

【解决方案2】：

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

在我看来，我建议你可以尝试修改 API，并添加一个方法来获取文件 blob 数据。然后，在 IE 和 Edge 浏览器中，获取文件数据后，可以在 IE 和 Edge 浏览器中使用 msSaveOrOpenBlob 方法下载文件，在 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);
            };
        };

【讨论】：