如何在React应用中触发Gmail Compose UI并预填数据？

方法1：使用Gmail自定义URL（最简单无授权方案） #

Gmail支持直接构造特定URL打开撰写界面并预填充核心信息，无需调用API，适合快速落地需求。

核心参数说明 #

• to：收件人邮箱（多个用逗号分隔）
• subject：邮件主题（需URL编码）
• body：邮件正文（支持换行符%0A，需URL编码）
• cc/bcc：抄送/密送邮箱（可选）

React实现示例 #

通过用户主动点击触发打开Gmail撰写页，避免浏览器拦截：

import { useCallback } from 'react';

function GmailComposeButton() {
  const openGmailCompose = useCallback(() => {
    const params = new URLSearchParams({
      to: 'recipient@example.com',
      subject: encodeURIComponent('预填充的邮件主题'),
      body: encodeURIComponent('您好，这是预填充的邮件正文%0A%0A第二行内容')
    });

    window.open(`https://mail.google.com/mail/?view=cm&fs=1&tf=1&${params.toString()}`, '_blank');
  }, []);

  return (
    <button onClick={openGmailCompose}>
      打开Gmail写邮件
    </button>
  );
}

export default GmailComposeButton;

注意事项 #

• 参数内容必须URL编码，防止特殊字符导致解析错误
• 必须通过用户主动交互触发（如按钮点击），避免被浏览器弹窗拦截
• 正文长度存在限制，过长内容可能被截断

方法2：使用Google Workspace Gmail API（高级场景） #

如果需要更复杂的操作（如自动保存草稿、添加附件、动态关联用户邮箱数据），可以使用Gmail API，但需要用户授权登录Google账号。

实现步骤 #

1. 在Google Cloud Console启用Gmail API并创建OAuth2客户端ID
2. 在React应用中集成Google OAuth2授权流程，获取访问令牌
3. 调用users.drafts.create接口创建预填充草稿，再打开草稿编辑界面

React代码片段（简化版） #

import { useCallback } from 'react';

function GmailApiCompose() {
  const createAndOpenDraft = useCallback(async () => {
    try {
      // 假设已通过OAuth2获取到用户的accessToken
      const accessToken = '用户授权后的访问令牌';
      
      // 构造草稿数据（正文需Base64编码并适配URL安全格式）
      const draftData = {
        message: {
          payload: {
            headers: [
              { name: 'To', value: 'recipient@example.com' },
              { name: 'Subject', value: 'API预填充的邮件主题' }
            ],
            body: {
              raw: btoa('这是API预填充的邮件正文').replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
            }
          }
        }
      };

      // 调用API创建草稿
      const response = await fetch('https://gmail.googleapis.com/gmail/v1/users/me/drafts', {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${accessToken}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(draftData)
      });

      const draft = await response.json();
      // 打开刚创建的草稿
      window.open(`https://mail.google.com/mail/?view=ct&th=${draft.id}`, '_blank');
    } catch (error) {
      console.error('创建草稿失败:', error);
    }
  }, []);

  return (
    <button onClick={createAndOpenDraft}>
      通过API打开Gmail草稿
    </button>
  );
}

export default GmailApiCompose;

优缺点 #

• 优点：支持复杂邮件内容、附件，可结合用户邮箱数据动态生成内容
• 缺点：需要OAuth2授权流程，开发复杂度更高，用户需登录Google账号

方法3：使用mailto链接（通用 fallback 方案） #

如果不需要强制打开Gmail，可使用标准mailto链接，系统会调用默认邮件客户端（可能是Gmail），兼容性最好。

React实现示例 #

function MailtoComposeButton() {
  const mailtoUrl = `mailto:recipient@example.com?subject=${encodeURIComponent('邮件主题')}&body=${encodeURIComponent('邮件正文')}`;
  
  return (
    <a href={mailtoUrl} target="_blank" rel="noopener noreferrer">
      打开默认邮件客户端写邮件
    </a>
  );
}

export default MailtoComposeButton;

注意事项 #

• 无法强制指定打开Gmail，取决于用户系统的默认邮件客户端设置
• 参数规则与Gmail URL一致，需进行URL编码

内容的提问来源于stack exchange，提问作者Mohit Kamal