能否用单个JavaScript函数和按钮实现封装表格邮件及已打印HTML表格邮件发送？

Hey there! Let's tackle your two questions one by one—both totally doable with some vanilla JavaScript and HTML setup.

Absolutely! You can pull this off using the mailto protocol to trigger the user's default email client, paired with a simple JS function to grab and format your table content. Here's a straightforward implementation:

Step 1: Set up your HTML (Table + Trigger Button) #

First, define your table and a button that will kick off the email action:

<table id="targetTable" border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Department</th>
      <th>Join Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mike Taylor</td>
      <td>Engineering</td>
      <td>2022-05-10</td>
    </tr>
    <tr>
      <td>Sarah Lee</td>
      <td>Marketing</td>
      <td>2023-01-15</td>
    </tr>
  </tbody>
</table>

<button onclick="sendTableAsEmail()">Send Table via Email</button>

Step 2: Write the JavaScript Function #

This function will capture the table's HTML, format it for email compatibility, and open the user's default email client:

function sendTableAsEmail() {
  // Grab the table element from the DOM
  const table = document.getElementById('targetTable');
  // Convert the table to an HTML string
  const tableHtml = table.outerHTML;

  // Define email details
  const recipient = 'team@example.com';
  const emailSubject = 'Employee Table Data';
  // Wrap the table in a basic HTML structure for better email rendering
  const emailBody = `
    <h3>Requested Employee Table</h3>
    ${tableHtml}
  `;

  // Encode content to safely pass in the mailto URL
  const encodedSubject = encodeURIComponent(emailSubject);
  const encodedBody = encodeURIComponent(emailBody);

  // Trigger the email client
  window.location.href = `mailto:${recipient}?subject=${encodedSubject}&body=${encodedBody}`;
}

Quick Notes: #

• This depends on the user having a default email client (like Outlook, Gmail Desktop, etc.) set up on their device.
• Email clients are finicky with HTML—for best results, inline any CSS styles directly on table elements instead of using external stylesheets.

Yes, you absolutely can do this in one function! The trick is making sure the table looks identical to its printed version. Since most email clients ignore external stylesheets, we'll inline your print-specific CSS directly into the email content.

Here's the all-in-one implementation:

HTML (Table + Print Styles + Button) #

<style>
  /* Print-specific styles we'll inline for email */
  .print-ready-table {
    border-collapse: collapse;
    width: 100%;
    font-family: Arial, sans-serif;
  }
  .print-ready-table th, .print-ready-table td {
    border: 1px solid #333;
    padding: 10px;
    text-align: left;
  }
  .print-ready-table th {
    background-color: #f0f0f0;
    font-weight: bold;
  }
</style>

<table id="printStyleTable" class="print-ready-table">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>In Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Wireless Headphones</td>
      <td>$149.99</td>
      <td>22</td>
    </tr>
    <tr>
      <td>Smart Watch</td>
      <td>$299.99</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

<button onclick="sendPrintStyledTable()">Send Print-Style Table</button>

Single JavaScript Function #

function sendPrintStyledTable() {
  const table = document.getElementById('printStyleTable');
  
  // Extract and inline the print styles to ensure email clients render them
  const styleSheet = document.styleSheets[0];
  let inlineStyles = '';
  for (let i = 0; i < styleSheet.cssRules.length; i++) {
    inlineStyles += styleSheet.cssRules[i].cssText;
  }

  // Build the full email content with inline styles
  const emailBody = `
    <html>
      <head>
        <style>${inlineStyles}</style>
      </head>
      <body>
        <h3>Print-Style Product Inventory</h3>
        ${table.outerHTML}
      </body>
    </html>
  `;

  // Encode and trigger the email
  const encodedSubject = encodeURIComponent('Print-Style Product Inventory');
  const encodedBody = encodeURIComponent(emailBody);
  window.location.href = `mailto:inventory@example.com?subject=${encodedSubject}&body=${encodedBody}`;
}

Bonus: For server-side email sending #

If you want to send emails directly without opening the user's email app, you'll need a backend service (like Node.js with Nodemailer, PHP with PHPMailer). The frontend button would send an API request to your backend, which handles the actual email delivery. But for a client-side-only solution, the mailto method is the simplest approach.

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