Vue.js如何获取渲染组件的纯HTML以通过AJAX发送邮件？

Got it, let's break down what's happening here and how to fix it quickly.

The error you're seeing happens because this.$refs.invoiceEmail.$el is a DOM Element object, not plain text. DOM elements are full of circular references (like parentNode pointing back to the element's parent, which in turn references the child, and so on). When your AJAX call tries to serialize this object to JSON, it hits those circular loops and throws the error.

The Solution: Grab the Component's Rendered HTML as a String #

Instead of passing the DOM element itself, you need to extract its raw HTML content. Here's how to do it in both Vue 2 and Vue 3:

For Vue 2:

Use the outerHTML property of the DOM element. This returns the full HTML string of the element, including the element itself and all its children.

Wrap the call in $nextTick() to make sure the component has fully rendered all dynamic content (like async data, v-if blocks, or computed values) before you grab the HTML:

async sendEmail() {
  // Wait for the component to finish rendering all dynamic content
  await this.$nextTick();
  
  // Extract the full HTML string from the component's root element
  const emailBodyHtml = this.$refs.invoiceEmail.$el.outerHTML;
  
  // Now send it via AJAX
  try {
    await fetch('/your-server-mail-api', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        // Other email fields (subject, recipient, etc.)
        subject: 'Your Invoice',
        to: 'customer@example.com',
        body: emailBodyHtml // This is now a plain string, no circular references!
      })
    });
    console.log('Email sent successfully!');
  } catch (error) {
    console.error('Failed to send email:', error);
  }
}

For Vue 3 (Composition API):

If you're using the Composition API, the approach is similar—just adjust how you access the ref:

import { ref, nextTick } from 'vue';

// Inside your component setup
const invoiceEmail = ref(null);

const sendEmail = async () => {
  await nextTick();
  const emailBodyHtml = invoiceEmail.value.$el.outerHTML;
  
  // Same AJAX logic as above
};

Extra Tip for Emails #

Keep in mind that most email clients don't support external stylesheets or complex CSS selectors. If your component uses <style> tags, you'll want to convert those styles to inline styles in the rendered HTML to ensure your email looks consistent across clients.

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