如何使用JavaScript实现直接打开.eml文件而非触发下载

你当前生成EML文件的思路完全可行，只要调整代码逻辑去掉下载触发、改为直接唤起系统关联程序即可，具体实现如下：

修正后可直接唤起邮件客户端的代码 #

function openEmail() {
    const emailTo = 'test@gmail.com';
    const emailSubject = 'Dummy Subject';
    // 邮件HTML内容可自定义
    const emailHtmlContent = '<b>Dummy Content</b><p>支持任意HTML标签，包括图片、样式等</p>';
    
    let emlContent = "data:message/rfc822;charset=utf-8,";
    emlContent += 'To: ' + emailTo + '\n';
    emlContent += 'Subject: ' + encodeURIComponent(emailSubject) + '\n';
    emlContent += 'X-Unsent: 1\n';
    emlContent += 'Content-Type: text/html; charset=utf-8\n\n';
    emlContent += emailHtmlContent;

    const a = document.createElement('a');
    a.href = emlContent;
    a.target = '_blank';
    a.style.display = 'none';
    document.body.appendChild(a);
    // 触发点击唤起客户端
    a.click();
    // 清理临时元素
    document.body.removeChild(a);
}

把上述方法绑定到你的按钮点击事件即可。

关键修改说明 #

• 移除了a标签的download属性，该属性会强制浏览器下载文件，去掉后浏览器会尝试用系统关联的程序打开对应MIME类型的内容
• 保留了X-Unsent: 1标识，这个标识会让邮件客户端识别为待发送的草稿，打开后直接处于编辑发送状态
• 中文/特殊字符的主题和内容建议用encodeURIComponent编码，避免乱码
• MIME类型统一为标准的message/rfc822，适配所有邮件客户端的识别规则

注意事项 #

• 该方案仅对安装了本地邮件客户端（Outlook、Thunderbird、Foxmail等）且关联了.eml格式的设备有效，是目前前端能实现的唯一支持HTML内容唤起邮件客户端的方案
• 如果用户默认用网页端邮箱（如Gmail网页版、QQ邮箱网页版），因为没有本地程序关联.eml格式，浏览器会 fallback 到下载EML文件，该限制属于系统层级，前端无法绕过
• 若需要兼容网页端邮箱场景，可额外增加服务端逻辑，调用对应网页邮箱的发信接口拼接HTML内容跳转，该方案需要针对不同邮箱单独适配。

内容的提问来源于stack exchange，提问作者pratibha banerjee