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:[e-mail]\nDTSTAMP:20120315T170000Z\nATTENDEE;CN=My 
  Self ;RSVP=TRUE:MAILTO:[e-mail]\nORGANIZER;CN=Me:MAILTO::[e-mail]\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();