如何通过Javascript将HTML表格发送至指定邮箱？

Absolutely feasible! I’ve tackled this exact requirement multiple times, and jsPDF (often paired with helper libraries) is more than capable of handling it. Let’s walk through why your initial attempt might have failed, then lay out reliable step-by-step solutions.

Why your initial jsPDF attempt might have failed #

jsPDF’s native fromHTML() method can struggle with complex table styling, merged cells, or dynamic content—it’s not the most robust for rendering HTML tables accurately. Instead, we have two better approaches: using html2canvas + jsPDF (to preserve exact table styling) or the jsPDF AutoTable plugin (purpose-built for dynamic, data-driven tables).

Solution 1: Use html2canvas + jsPDF (best for preserving custom styling) #

This method renders your HTML table as a canvas first, then converts that canvas to a PDF. It’s ideal if you need to replicate your table’s exact visual design.

Step 1: Include required libraries #

Add these scripts to your project (CDNs or local copies work):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

Step 2: Write the conversion function #

This function grabs your table by ID, converts it to a PDF, and prepares it for email:

async function convertTableToPdf() {
  // Target your table element
  const table = document.getElementById('your-table-id');
  
  // Render table to canvas (higher scale = sharper PDF)
  const canvas = await html2canvas(table, {
    scale: 2,
    useCORS: true, // Fixes issues with external resources (if any)
    logging: false
  });
  
  // Initialize jsPDF with A4 size
  const pdf = new jspdf.jsPDF('p', 'mm', 'a4');
  
  // Calculate dimensions for proper PDF fitting
  const imgWidth = 210; // A4 width in mm
  const pageHeight = 297; // A4 height in mm
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  let heightLeft = imgHeight;
  let position = 0;
  
  // Add canvas image to PDF
  pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;
  
  // Handle pagination for long tables
  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    pdf.addPage();
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;
  }
  
  // Return PDF as a Blob (ready for email)
  return pdf.output('blob');
}

Solution 2: Use jsPDF AutoTable (best for dynamic data) #

If you’re generating the table from a data array (instead of static HTML), this plugin builds the PDF table directly from your data—no rendering glitches, and automatic pagination.

Step 1: Include libraries #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.30/jspdf.plugin.autotable.min.js"></script>

Step 2: Generate PDF from table data #

If you have your table data stored in an array, use this:

function generatePdfFromData() {
  const pdf = new jspdf.jsPDF('p', 'mm', 'a4');
  
  // Replace with your actual table data
  const tableData = [
    ['Name', 'Email', 'Phone'],
    ['John Doe', 'john@example.com', '555-1234'],
    ['Jane Smith', 'jane@example.com', '555-5678']
  ];
  
  // Add styled table to PDF
  pdf.autoTable({
    head: [tableData[0]],
    body: tableData.slice(1),
    styles: { fontSize: 10, cellPadding: 3 },
    headStyles: { fillColor: '#2196F3', textColor: '#fff' }
  });
  
  return pdf.output('blob');
}

If you want to use your existing HTML table, first extract its data into an array by looping through <tr> and <td> elements with JavaScript.

How to send the PDF via email #

Frontend code can’t send emails securely (you’d expose your email credentials). Instead, send the PDF Blob to your backend server, which will handle the email delivery.

Frontend code to send PDF to backend #

async function sendPdfEmail() {
  const pdfBlob = await convertTableToPdf(); // Or generatePdfFromData()
  
  // Wrap PDF in FormData
  const formData = new FormData();
  formData.append('pdfFile', pdfBlob, 'table-data.pdf');
  formData.append('recipientEmail', 'target-email@example.com');
  
  // Send to your backend endpoint
  try {
    const response = await fetch('/send-email', {
      method: 'POST',
      body: formData
    });
    
    response.ok ? alert('PDF sent successfully!') : alert('Failed to send PDF.');
  } catch (error) {
    console.error('Error sending email:', error);
    alert('An error occurred while sending the PDF.');
  }
}

Backend example (Node.js/Express) #

Use nodemailer to handle email sending on your server:

const express = require('express');
const multer = require('multer');
const nodemailer = require('nodemailer');
const app = express();
const upload = multer();

app.post('/send-email', upload.single('pdfFile'), async (req, res) => {
  try {
    // Configure email transporter (use your provider's settings)
    const transporter = nodemailer.createTransport({
      service: 'Gmail',
      auth: {
        user: 'your-email@example.com',
        pass: 'your-app-specific-password' // Use app passwords for security
      }
    });
    
    // Email configuration
    const mailOptions = {
      from: 'your-email@example.com',
      to: req.body.recipientEmail,
      subject: 'Your Table Data PDF',
      text: 'Attached is the table data you requested.',
      attachments: [{ filename: req.file.originalname, content: req.file.buffer }]
    };
    
    await transporter.sendMail(mailOptions);
    res.status(200).send('Email sent successfully');
  } catch (error) {
    console.error('Error sending email:', error);
    res.status(500).send('Failed to send email');
  }
});

app.listen(3000, () => console.log('Server running on port 3000'));

Key Tips to Avoid Issues #

• Simplify styling: html2canvas doesn’t support all CSS properties (like box-shadow or gradients). Stick to basic styles for best results.
• Test across browsers: html2canvas behaves slightly differently across browsers—validate your conversion in Chrome, Firefox, and Safari.
• Handle large tables: Solution 1 includes pagination code for long tables; AutoTable handles pagination automatically.

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