使用 javascript 或 jquery 即时创建 .ics 文件？答案

【问题标题】：create .ics file on the fly using javascript or jquery?使用 javascript 或 jquery 即时创建 .ics 文件？
【发布时间】：2012-01-19 18:20:16
【问题描述】：

有人可以告诉我是否有任何 jquery 插件可以动态创建 .ics 文件，其值来自页面 div 值，就像会有

<div class="start-time">9:30am</div>
<div class="end-time">10:30am</div>
<div class="Location">California</div>

或 javascript 方式来动态创建 .ics 文件？我基本上需要创建 .ics 文件并使用 javascript 或 jquery 提取这些值？并将创建的 ics 文件链接到“添加到日历”链接，以便将其添加到 Outlook？

【问题讨论】：

标签： javascript outlook add icalendar

【解决方案1】：

这是一个老问题，但我有一些想法可以帮助您（或其他任何需要执行类似任务的人）。

以及创建文件内容的JavaScript，并打开文件：

var filedata = $('.start-time, .end-time, .Location').text();
window.open( "data:text/calendar;charset=utf8," + escape( filedata ) );

您可能希望将该代码添加到表单按钮的 onclick 事件中。

我手边没有 Outlook，所以我不确定它是否会自动识别文件类型，但它可能会。

希望这会有所帮助。

【讨论】：

【解决方案2】：

您需要将其制作为 ICS 格式。您还需要转换日期和时区；例如。 20120315T170000Z 或 yyyymmddThhmmssZ

    msgData1 = $('.start-time').text();
    msgData2 = $('.end-time').text();
    msgData3 = $('.Location').text();

    var icsMSG = "BEGIN:VCALENDAR\nVERSION:2.0\nPRODID:-//Our Company//NONSGML v1.0//EN\nBEGIN:VEVENT\nUID:me@google.com\nDTSTAMP:20120315T170000Z\nATTENDEE;CN=My Self ;RSVP=TRUE:MAILTO:me@gmail.com\nORGANIZER;CN=Me:MAILTO::me@gmail.com\nDTSTART:" + msgData1 +"\nDTEND:" + msgData2 +"\nLOCATION:" + msgData3 + "\nSUMMARY:Our Meeting Office\nEND:VEVENT\nEND:VCALENDAR";

    $('.test').click(function(){
        window.open( "data:text/calendar;charset=utf8," + escape(icsMSG));
    });

以上示例将创建一个 ics 文件以供下载。用户必须打开它，然后 outlock、iCal 或谷歌日历将完成剩下的工作。

【讨论】：

仅供参考：截至 2013 年 8 月 8 日，此代码不起作用。 .ics 文件下载并打开，但 iCal 说它无法读取文件并出错：/ 注意：如果删除“\n BEGIN:VEVENT \n”周围的空格，它可以工作，但不允许我编辑6 个字符以下的任何内容 :(
所以这在 iOS 上的网络浏览器中有效，但当它包含在 phonegap 中时则无效。知道如何使它工作吗？对于那些希望在单独的问题中解决此问题的人，请点击此处：stackoverflow.com/questions/18166561/…
无法在 IE 和 Opera 中工作，请参阅 this question

【解决方案3】：

这种方法运行良好，但是在 IE8 中浏览器无法识别文件类型并拒绝作为日历项打开。为了解决这个问题，我必须在服务器端创建代码（并通过 RESTful 服务公开），然后将响应标头设置如下；

@GET
@Path("generateCalendar/{alias}/{start}/{end}")
@Produces({ "text/v-calendar" })
public Response generateCalendar(
        @QueryParam("alias") final String argAlias,
        @QueryParam("start") final String argStart,
        @QueryParam("end") final String argEnd) {
   ResponseBuilder builder = Response.ok();
   builder.header("content-disposition", "attachment;filename=calendar.ics");
   builder.entity("BEGIN:VCALENDAR\n<........insert meeting details here......>:VCALENDAR");
   return builder.build();
}

这可以通过在服务 URL 上调用 window.location 来提供，适用于 Chrome、Firefox 和 IE8。

希望这会有所帮助。

【讨论】：

【解决方案4】：

根据我在网上和本网站上找到的内容，无法在 IE 中使用它，因为您需要包含某些标题才能让 IE 知道下载此文件。

window.open 方法适用于 Chrome 和 Firefox，但不适用于 IE，因此您可能需要重组代码以使用服务器端语言来生成和下载 ICS 文件。

更多可以在question中找到

【讨论】：

【解决方案5】：

虽然这是一个较老的问题，但我也一直在寻找前端解决方案。我最近偶然发现了 ICS.js library 看起来就像您正在寻找的答案。

【讨论】：