window.open 在 IE 中无法下载事件答案

【问题标题】：window.open is not working in IE to download an eventwindow.open 在 IE 中无法下载事件
【发布时间】：2017-07-10 05:54:54
【问题描述】：

我正在尝试通过单击每个 div 中的按钮来创建一个 ICS 文件。这在 Chrome 和 Firefox 中运行良好。但是，它无法在 IE 上运行。

'window.open' 中的代码有什么问题？

另外，如何根据事件 ID 更改文件的名称？

这是代码

angular.module('myApp', []).controller('myCtrl', function($scope){
  $scope.card = [{
    Name: "New Year Celebration",
    Description: "",
    Venue: "",
    StartDate: "Fri Dec 29 2017 23:30:00 GMT+0530",
    EndDate: "Sat Dec 30 2017 00:30:00 GMT+0530",
    EventID: "1"
  }, {
    Name: "25th Anniversary Celebration",
    Description: "25th Anniversary Celebration of organization",
    Venue: "Auditorium",
    StartDate: "Wed May 31 2017 17:30:00 GMT+0530",
    EndDate: "Wed May 31 2017 20:30:00 GMT+0530",
    EventID: "2"
  }, {
    Name: "Annual Day",
    Description: "",
    Venue: "",
    StartDate: "Fri Oct 13 2017 14:30:00 GMT+0530",
    EndDate: "Fri Oct 13 2017 17:30:00 GMT+0530",
    EventID: "3"
  }];

  $scope.add = function(eventObj) {
  $scope.eventID= this.eventObj.EventID;
  $scope.startDate= this.eventObj.StartDate;
    $scope.endDate= this.eventObj.EndDate;
    $scope.venue= this.eventObj.Venue;
    $scope.subject= this.eventObj.Name;
    $scope.result= this.eventObj.Description;
  //console.log(this);
    $scope.icsMSG = "BEGIN:VCALENDAR\nVERSION:2.0\nBEGIN:VEVENT\nDTSTART:" + $scope.startDate +"\nDTEND:" + $scope.endDate +"\nLOCATION:" + $scope.venue + "\nSUMMARY:" + $scope.subject + "\nDESCRIPTION:"+ $scope.result +"\nEND:VEVENT\nEND:VCALENDAR";
	window.open("data:text/calendar;charset=utf8," + escape($scope.icsMSG),"_self");
  };
});

.event {
  height: 150px;
  width: 250px;
  border: 1px solid lightgrey;
  background-color: skyblue;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="eventObj in card" class="event">
  Subject: <span>{{eventObj.Name}}</span>
  <br /><br />	
  Venue:<span>{{eventObj.Venue}}</span>
  <br /><br />	
  Date:<span>{{eventObj.StartDate | date:'fullDate'}}</span>
  <br /><br />
  <button ng-click="add(eventObj.EventID)">Add to Outlook</button>
  </div>
</div>

【问题讨论】：

标签： javascript angularjs internet-explorer icalendar window.open

【解决方案1】：

数据 URI 不能用于导航、脚本或填充 IE 中的框架或 iframe 元素。

解决方法是使用 navigator.msSaveBlob 生成文件并提示用户保存。 Refer this answer

您还可以使用 downloadify 之类的东西来代替 here 提到的数据 URL（也适用于 IE）

【讨论】：