Search code examples
angulartypescriptwindows-7internet-explorer-11icalendar

Ics file description in IE11 - windows 7 contains %5Cn

I have a typescript code in an angular web app to generate an ics file and download it. I am able to download this file successfully in chrome and when I open the ics file, it looks fine with all the new lines. However, when I use IE11- win7 to download the ics file and open it in outlook. The description looks weird. All the new lines "\n" have been replaced with "%5Cn". What does "%5Cn" stand for? Does anybody have any idea on how to get the description to have new line instead of %5Cn when I download it using Ie11- win7.

Here is how my description looks like when I download using chrome. enter image description here

Here is how my description looks like when I download using IE11.Look at "%5Cn" inside the description. enter image description here

Here is my code:

  private formatEventDetailsToAddToCalendar() {
    const formattedDate = this.appointmentDetails.formattedAppointmentDate

    this.calendarEventBody = 'Please arrive 20 minutes prior to your appointment.\n\n'
      + 'Appointment Type: ' + this.location.apptType + '\n'
      + 'Appointment Date and Time: ' + formattedDate.substring(formattedDate.indexOf(', ') + 1, formattedDate.length) + ' '
      + this.appointmentDetails.formattedAppointmentTime + ' ' + 'CST' + '\n'
      + 'Provider: ' + this.provider.name + '\n'
      + 'Clinic name & address:\n' + this.getAddress() + '\n'
    if (this.location.phone) {
      this.calendarEventBody = this.calendarEventBody.concat('Clinic phone: ' + this.location.phone)
    }
    this.calendarEventBody = this.calendarEventBody.replace(/\n+/g, '\\n')

  }

Here is the code to download the ics file:

this.href = this.addToCalendarService.getHrefFor(this.addToCalendarService.calendarType.iCalendar, this.newEvent)

    const link = document.createElement('a')
    link.href = this.href

    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      const icsMSG = this.href
      let ics = icsMSG.replace('data:text/calendar;charset=utf8,', '')
      ics = ics.replace(new RegExp('%0A', 'g'), '\n')
      ics = ics.replace(new RegExp('%20', 'g'), ' ')

      const blob = new Blob([ics], {type: 'text/calendar;charset=utf-8\''})
      window.navigator.msSaveOrOpenBlob(blob, 'upcoming_appointment.ics')

    } else {
      link.download = 'upcoming-appointment.ics'
      document.body.appendChild(link)
      link.click()
    }

I am using @trademe/ng-add-to-calendar library.

Solution

  • %5Cn is an encoded version of \n. %5C is a literal backslash. I make a test and find that Chrome can decode it automatically but IE 11 can't. So I think that's the cause of the problem.

    You could check the value of icsMSG in this link, I guess it contains %5Cn which means it's encoded:

    const icsMSG = this.href

    So in IE 11 you need to decode it first using decodeURI(), then the outcome in IE 11 will be the same with that in Chrome:

    const icsMSG = decodeURI(this.href)