window.open is not working in IE to download an event

Question

I'm trying to create an ICS file on click of buttons inside each of my divs. This works fine in Chrome and Firefox. However, it fails to work on IE.

What's wrong with the code in 'window.open'?

Also, how do I change the name of th file based on the event ID?

Here's the code

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>

score 0 · Answer 1 · answered Jul 10 '17 at 06:57

Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements in IE.

The solution is to use navigator.msSaveBlob to generate the file and prompt the user to save it. Refer this answer

You could also use something like downloadify instead of data URLs (would work for IE as well) as mentioned here

window.open is not working in IE to download an event

1 Answers1