Javascript 生成的 .ics 文件可以在 Chrome 和 Firefox 中打開，但不能在 IE 中打開

Question

我正在從 JS 生成一個 .ics 日歷條目，接​​下來我使用數據 URI 打開它：

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

其中“icsMSG”是動態生成的 .ics 文件。 這是來自 console.log 的示例輸出：

BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//www.jungledragon.com//NONSGML v1.0//EN
BEGIN:VEVENT
UID:info@jungledragon.com
DTSTAMP:20140321T153010Z
ATTENDEE;CN=My Self ;RSVP=FALSE
CATEGORIES:APPOINTMENT
DTSTART:20140321T153010Z
DTEND:
LOCATION:5384 DA Heesch, The Netherlands
SUMMARY:JungleDragon Daylight Event
DESCRIPTION:Hey you!   \n \n  At this time in your calendar light conditions are great for the location you selected:\n \nhttp://www.ignore.org/apps/jd3/daylight#date=1392996610000&lat=51.73171&long=5.527827000000002\n\nHappy shooting, and be sure to share your wildlife photos back to http://www.jungledragon.com\nCheers,\nThe JungleDragon Team
END:VEVENT
END:VCALENDAR

根據規范，原始輸出將在每行末尾包含 \\n 個字符。

當我從 Chrome 或 Firefox 運行它時，上面的示例工作正常，在這兩種情況下，它都會打開我的默認日歷應用程序（Outlook 2013）。 在 IE(11) 和 Opera 中，發生了一些奇怪的事情。 將打開一個新選項卡，將上述字符串作為 URL，所有特殊字符都經過 URL 轉義。 像這樣：

data:text/calendar;charset=utf8,BEGIN%3AVCALENDAR%0AVERSION%3A2.0%0APRODID%3A-//www.jungledragon.com//NONSGML%20v1.0//EN%0ABEGIN%3AVEVENT%0AUID%3Ainfo@jungledragon.com%0ADTSTAMP%3A20140321T153043Z%0AATTENDEE%3BCN%3DMy%20Self%20%3BRSVP%3DFALSE%0ACATEGORIES%3AAPPOINTMENT%0ADTSTART%3A20140321T153043Z%0ADTEND%3A%0ALOCATION%3A5384%20DA%20Heesch%2C%20The%20Netherlands%0ASUMMARY%3AJungleDragon%20Daylight%20Event%0ADESCRIPTION%3AHey%20you%21%20%20%20%5Cn%20%5Cn%20%20At%20this%20time%20in%20your%20calendar%20light%20conditions%20are%20great%20for%20the%20location%20you%20selected%3A%5Cn%20%5Cnhttp%3A//www.ignore.org/apps/jd3/daylight%23date%3D1392996643000%26lat%3D51.73171%26long%3D5.527827000000002%5Cn%5CnHappy%20shooting%2C%20and%20be%20sure%20to%20share%20your%20wildlife%20photos%20back%20to%20http%3A//www.jungledragon.com%5CnCheers%2C%5CnThe%20JungleDragon%20Team%0AEND%3AVEVENT%0AEND%3AVCALENDAR

接下來，新選項卡是空白的，什么也沒有發生。 我不確定我的 .ics 中是否存在語法錯誤，但鑒於它適用於 Chrome 和 Firefox，我不這么認為。

有什么想法嗎？

編輯，額外信息：如果我手動打開下載的 .ics 文件，內容完全相同，它也可以在 IE 和 Opera 中工作。 我使用window.open打開它的方式一定有問題嗎？

Answer 1

回答我自己的問題：

問題不在於 .ics 輸出本身，而在於 IE 和 Opera 沒有將 js 生成的輸出視為要下載的文件。 要強制執行此類下載，只能通過服務器端腳本進行。

我最終重新編碼了我的邏輯以在服務器端輸出 .ics 文件，並通過強制執行這些標頭：

header('Content-type: text/calendar; charset=utf-8');
header('Content-Disposition: attachment; filename=cal.ics');

這是一個痛苦的重組，但現在它可以跨瀏覽器工作。

Answer 2

似乎有一種方法可以在不使用服務器端腳本的情況下執行此操作。 當我在react-add-to-calendar的github 問題中發現這個對我 有用的代碼段時，我回答了一個類似的 Stack Overflow 問題：

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

這在 Internet Explorer 11 中對我有用，而無需使用服務器下載文件。

Answer 3

簡化的解決方案可能只是使用鏈接內的下載屬性來設置文件名

<a class="icon-ical" href="data:text/calendar;charset=utf8...." download="cal.ics">iCal Calendar</a>