如何实现表单点击发送后打开Outlook并插入可编辑HTML表格？

嘿，这个需求我刚好踩过坑，mailto协议确实只能玩纯文本，搞不定HTML格式，给你几个实用的方案，你可以根据自己的应用场景来选：

EML是标准的邮件格式文件，天然支持HTML内容，用户下载后双击就能直接用Outlook打开，而且正文里的HTML表格还能设置成可编辑状态。这是我最推荐的方案，几乎没有环境限制。

具体实现思路：

• 先构造包含HTML表格的EML内容，要设置好邮件头（比如发件人、主题），并指定Content-Type为text/html
• 把构造好的内容转成Blob对象，动态生成下载链接，点击「发送」按钮时触发下载

给你一段JavaScript示例代码：

document.getElementById('sendBtn').addEventListener('click', function() {
  // 构造可编辑的HTML表格，注意加contenteditable属性
  const editableTable = `
    <table contenteditable="true" border="1" cellpadding="4">
      <tr><th>姓名</th><th>联系邮箱</th><th>提交时间</th></tr>
      <tr><td>张三</td><td>zhangsan@example.com</td><td>2024-05-20</td></tr>
    </table>
  `;
  
  // 拼接EML文件的完整内容，注意邮件头的格式规范
  const emlContent = `From: 你的应用 <app-notify@example.com>
To: 
Subject: 表单提交数据
MIME-Version: 1.0
Content-Type: text/html; charset=utf-8

${editableTable}
`;
  
  // 生成Blob并触发下载
  const blob = new Blob([emlContent], { type: 'message/rfc822' });
  const downloadUrl = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = '表单数据邮件.eml';
  document.body.appendChild(link);
  link.click();
  // 清理资源
  document.body.removeChild(link);
  URL.revokeObjectURL(downloadUrl);
});

用户下载EML文件后，双击打开就是Outlook邮件窗口，表格因为加了contenteditable="true"，可以直接在Outlook里编辑内容，编辑完就能直接发送，完全符合你的需求。

如果你的应用是Windows桌面端（比如用Electron开发的桌面应用），可以直接调用Outlook的COM接口来创建邮件，直接插入HTML内容，甚至不用用户下载文件，直接唤起Outlook窗口。

示例代码（Electron中需启用nodeIntegration）：

// 仅适用于Windows系统
try {
  const outlook = new ActiveXObject('Outlook.Application');
  const mailItem = outlook.CreateItem(0); // 0代表创建邮件项
  
  mailItem.Subject = '表单提交数据';
  // 直接设置HTML正文，表格设为可编辑
  mailItem.HTMLBody = `
    <table contenteditable="true" border="1" cellpadding="4">
      <tr><th>姓名</th><th>联系邮箱</th><th>提交时间</th></tr>
      <tr><td>张三</td><td>zhangsan@example.com</td><td>2024-05-20</td></tr>
    </table>
  `;
  
  mailItem.Display(); // 直接打开Outlook的邮件编辑窗口
} catch (error) {
  console.error('无法唤起Outlook:', error);
}

注意：这个方法只能在Windows系统上用，而且现代浏览器（Chrome/Firefox）不支持ActiveX，只有IE和旧版Edge能用，所以更适合桌面应用场景。

如果你的应用是企业级产品，需要和Outlook Web App（OWA）深度集成，可以用Office.js开发官方插件，直接在Outlook内部插入HTML表格。

示例代码：

// 需在Office.js环境中运行
Office.context.mailbox.item.body.setAsync(
  '<table contenteditable="true" border="1" cellpadding="4"><tr><th>姓名</th><th>联系邮箱</th><th>提交时间</th></tr><tr><td>张三</td><td>zhangsan@example.com</td><td>2024-05-20</td></tr></table>',
  { coercionType: Office.CoercionType.Html },
  function(result) {
    if (result.status === Office.AsyncResultStatus.Succeeded) {
      console.log('可编辑表格已插入邮件正文');
    } else {
      console.error('插入失败:', result.error.message);
    }
  }
);

这个方案需要用户安装你的Outlook插件，适合深度绑定Outlook的场景，普通网页应用可能没必要折腾这个。

内容的提问来源于stack exchange，提问作者Konstantin Kožuchov