Javascript生成的.ics文件在Chrome和Firefox中打开，但在IE中不打开 [英] Javascript-generated .ics file opens in Chrome and Firefox, but not in IE

问题描述

我从JS生成.ics日历项，接下来使用数据URI打开它：

I'm generating a .ics calendar entry from JS, next I open it using a data-URI:

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

其中icsMSG是动态生成的.ics文件。下面是来自console.log的输出示例：

Where "icsMSG" is the dynamically generated .ics file. Here's a sample output from console.log:

BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//www.jungledragon.com//NONSGML v1.0//EN
BEGIN:VEVENT
UID:[e-mail]
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

原始输出将在每行末尾有\\\
个字符

The raw output will be have \n chars at the end of each line, as per the specification.

上述示例在从Chrome或Firefox运行时运行正常，在这两种情况下都会打开我的默认日历应用程序（Outlook 2013） 。在IE（11）和Opera，而是奇怪的事情发生。将打开一个新的选项卡，其上面的字符串作为URL，所有特殊字符都进行URL转义。像这样：

The above sample works fine when I run it from Chrome or Firefox, in both case it will open up my default Calendar application (Outlook 2013). In IE(11) and Opera, instead something weird happens. A new tab opens that has the above string as the URL, with all special chars URL-escaped. Like so:

data:text/calendar;charset=utf8,BEGIN%3AVCALENDAR%0AVERSION%3A2.0%0APRODID%3A-//www.jungledragon.com//NONSGML%20v1.0//[e-mail]%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

接下来，新标签页为空白，没有任何反应。我不确定是否有一个语法错误在我的。。，但考虑到它适用于Chrome和Firefox，我不相信。

Next, the new tab is blank and nothing happens. I'm not sure whether there is a syntax mistake in my .ics, but given that it works for Chrome and Firefox, I don't believe so.

有任何想法吗？

编辑额外信息：如果我手动打开下载.ics文件与完全相同的内容，它的工作也在IE和Opera。使用window.open打开它的方式一定是错误的？

Edit, extra info: If I manually open a downloaded .ics file with the exact same content, it does work also in IE and Opera. Something must be wrong with the way I open it using window.open?

推荐答案

回答自己的问题：

.ics输出本身，而是在IE和Opera不把js生成的输出作为一个文件来下载。要实施这样的下载，只能从服务器端脚本。

The problem was not in the .ics output itself, rather it was in IE and Opera not treating the js-generated output as a file to download. To enforce such a download, is only possible from a server-side script.

我最后重新编码我的逻辑输出服务器端的.ics文件，通过强制实施这些头文件：

I ended up recoding my logic to output the .ics file on the server-side, and by enforcing these headers:

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

这是一个痛苦的重组，但现在它可以在各种浏览器中使用。

It was a painful restructuring, but now it works across browsers.

这篇关于Javascript生成的.ics文件在Chrome和Firefox中打开，但在IE中不打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！