ICS 文件的生成及下载

  因为最近的一个新的需求--要求前端能够操作系统(电脑和手机)的日历，给日历添加日程。what?，没搞过，一头雾水。最后了解到了可以通过生成 ICS 文件。

简介

  ICS文件是一种以通用日历格式保存的日历文件。ICS格式已经被很多的电子邮件程序和日历程序广泛使用(eg：Outlook、谷歌日历 和 苹果日历等)。用途：通常用于向用户发哦是哪个事件或任务，用户也可以将事件导入到日历中。

• 以纯文本的格式保存，存储了日历事件的标题、摘要、开始时间、结束时间等。

下载方式

• 获取设置信息

  let myDate = new Date();
  let month = myDate.getMonth() > 9 ? myDate.getMonth() + 1 : '0' + (myDate.getMonth() + 1);
  let date = myDate.getDate() > 9 ? myDate.getDate() : '0' + myDate.getDate();
  let hour = myDate.getHours() > 9 ? myDate.getHours() : '0' + myDate.getHours();
  let minutes = myDate.getMinutes() > 9 ? myDate.getMinutes() : '0' + myDate.getMinutes();
  let seconds = myDate.getSeconds() > 9 ? myDate.getSeconds() : '0' + myDate.getSeconds();
  
  const startDateTime = myDate.getFullYear() + month + date + 'T' + hour + minutes + seconds;
  
  const endDateTime = myDate.getFullYear() + month + date + 'T' + (hour + 4) + minutes + seconds;
  const start = startDateTime;
  const end = endDateTime;
  const datetime = 'Friday, 3rd April 2020, 5pm';
  
  const location = '上海市xxx医院';
  

• 下载链接

  const icsMSG = "BEGIN:VCALENDAR\nVERSION:2.0\nPRODID:-//Our Company//NONSGML v1.0/
  /EN\nBEGIN:VEVENT\nUID:me@google.com\nDTSTAMP:20120315T170000Z\nATTENDEE;CN=My 
  Self ;RSVP=TRUE:MAILTO:me@gmail.com\nORGANIZER;CN=Me:MAILTO::me@gmail.com\nDTSTART:" + datetime 
  +"\nDTEND:" + start +"\nLOCATION:" + endDateTime + "\nSUMMARY:Our Meeting Office\nEND:VEVENT\nEND:VCALENDAR"
  

  或者

  const icsMSG =
    'BEGIN:VCALENDAR\nPRODID:-//Microsoft Corporation//Outlook 16.0 MIMEDIR//
    EN\nVERSION:2.0\nMETHOD:REQUEST\nX-MS-OLK-FORCEINSPECTOROPEN:TRUE\nBEGIN:VEVENT\nDESCRIPTION:When: ' +
    datetime +
    ';Where: ' +
    location +
    '\nDTSTART;TZID="China/Beijing":' +
    start +
    '\nDTEND;TZID="China/Beijing":' +
    end +
    '\nLOCATION:' +
    location +
    '\nSUMMARY;LANGUAGE=zh-cn:日程
    \nX-MICROSOFT-CDO-BUSYSTATUS:TENTATIVE\nX-MICROSOFT-CDO-IMPORTANCE:1\nX-MICROSOF
    T-CDO-INTENDEDSTATUS:BUSY\nX-MICROSOFT-DISALLOW-COUNTER:FALSE\nX-MS-OLK-CONFTYPE
    :0\nBEGIN:VALARM\nTRIGGER:-PT15M\nACTION:DISPLAY\nDESCRIPTION:Reminder\nEND:VALA
    RM\nEND:VEVENT\nEND:VCALENDAR\n';
  

  window.open('data:text/calendar;charset=utf8,' + icsMSG);

  然而天不随人愿，这样能下载，也能用，但是兼容性很差，手机下不了，Mac的safari浏览器下载没法用，报错如下：

最终的解决方案

  经过研究，终于解决了(这感觉太爽了)。其它方式不变，只是更改了下载的方式。

 const blob = new Blob([icsMSG], { type: 'text/calendar' });
 const link = document.createElement('a');
 link.href = window.URL.createObjectURL(blob);
 link.download = 'Calendar.ics';
 link.click();