Javascript 生成的 .ics 文件在 Chrome 和 Firefox 中打开

Javascript-generated .ics file opens in Chrome and Firefox, but not in IE(Javascript 生成的 .ics 文件在 Chrome 和 Firefox 中打开,但在 IE 中不打开)
本文介绍了Javascript 生成的 .ics 文件在 Chrome 和 Firefox 中打开,但在 IE 中不打开的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在从 JS 生成一个 .ics 日历条目,接​​下来我使用 data-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: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!   
 
  At this time in your calendar light conditions are great for the location you selected:
 
http://www.ignore.org/apps/jd3/daylight#date=1392996610000&lat=51.73171&long=5.527827000000002

Happy shooting, and be sure to share your wildlife photos back to http://www.jungledragon.com
Cheers,
The JungleDragon Team
END:VEVENT
END:VCALENDAR

根据规范,原始输出将在每行末尾有 个字符.

The raw output will be have 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//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,我不这么认为.

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 中不打开的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)