Apps Script技术问题：如何将Google Sheet文件发送至HTML Service输入的邮箱？

Hey Eric, let's break down the most likely reasons your email isn't sending when using Google Sheets' HTML Service for your popup form, plus share a working example to fix things up:

1. Missing Form Submission Prevention #

HTML forms default to reloading the page when submitted, which breaks the Google Apps Script communication. You need to block this default behavior and use google.script.run to call your server-side function instead.

2. Incorrect Client-Server Parameter Passing #

If your server-side function isn't receiving the email address correctly, it can't send the message. Make sure you're passing the input value properly from the HTML to the script.

3. Lack of Error Handling #

Without error callbacks, you won't know why the email failed (invalid format, permission issues, etc.). Adding success/failure handlers helps debug quickly.

4. Unverified Permissions #

MailApp requires authorization to send emails. The first time you run the script, you'll need to grant the necessary permissions (make sure you're running it as your own account, not a restricted deployment).

HTML File (Name it EmailForm.html) #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      form { padding: 1rem; display: flex; flex-direction: column; gap: 10px; }
      button { padding: 8px; background: #1a73e8; color: white; border: none; border-radius: 4px; cursor: pointer; }
    </style>
  </head>
  <body>
    <form id="emailForm">
      <label for="targetEmail">Recipient Email:</label>
      <input type="email" id="targetEmail" required placeholder="example@domain.com">
      <button type="submit">Send Email</button>
    </form>

    <script>
      // Handle form submission
      document.getElementById('emailForm').addEventListener('submit', (e) => {
        e.preventDefault(); // Stop default page reload
        const targetEmail = document.getElementById('targetEmail').value;

        // Call server-side function with error handling
        google.script.run
          .withSuccessHandler(() => {
            alert('Email sent successfully! 🎉');
            document.getElementById('emailForm').reset();
          })
          .withFailureHandler((error) => {
            alert(`Oops, failed to send: ${error.message}`);
          })
          .sendEmailToRecipient(targetEmail);
      });
    </script>
  </body>
</html>

Google Apps Script File (Code.gs) #

// Show the popup dialog in Google Sheets
function showEmailPopup() {
  const htmlOutput = HtmlService.createHtmlOutputFromFile('EmailForm')
    .setWidth(350)
    .setHeight(200);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Send Email to Recipient');
}

// Server-side function to send the email
function sendEmailToRecipient(targetEmail) {
  // Validate email format first
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(targetEmail)) {
    throw new Error('Please enter a valid email address');
  }

  try {
    MailApp.sendEmail({
      to: targetEmail,
      subject: 'Message from Google Sheets UI',
      body: 'This email was sent using the HTML Service popup form!'
    });
  } catch (err) {
    throw new Error(`Email failed: ${err.message}`);
  }
}

1. Save both files in your Google Sheets script editor.
2. Run showEmailPopup from the script editor (you'll be prompted to grant permissions on first run).
3. Enter a valid email address in the popup and submit—you should get a success alert, and the recipient will receive the email.

内容的提问来源于stack exchange，提问作者Eric K.