Question

我正在从JS生成.ics日历条目，然后我使用data-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

似乎有一种无需使用服务器端脚本即可执行此操作的方法。 I answered a similar Stack Overflow question在github issues for react-add-to-calendar中找到了对我有用的代码段：

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

这在Internet Explorer 11中对我有用，而无需使用服务器下载文件。

Answer 3

简化的解决方案可能只是使用链接内的download属性来设置文件名

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

Javascript生成的.ics文件在Chrome和Firefox中打开，但在IE中不会打开

3 个答案: