Nuxt+TS环境下Nodemailer发送HTML内容显示[object Object]问题

我正尝试在Vue组件中通过POST请求传递一个包含HTML代码的变量至后端API，使用TypeScript+Nuxt.js（Node+Vue）技术栈。

组件中获取table元素的代码：

const order_list = document.querySelector('table') as HTMLInputElement | null;

发送请求的代码：

sendMail(){
  $fetch("/api/prenota/mail",{
    method: "POST",
    body: {
      order_list : this.order_list,
      }
  });
  console.log(this.order_list)
},

Vue组件内的console.log能输出正确的HTML内容，但API中用Nodemailer发送邮件时，正文显示为[object Object]。我尝试强制将变量转为字符串，却没有效果，请问哪里操作出错了？

API处理函数代码：

export default defineEventHandler(async function(event) {
    const user = decodingUser(event)
    requireLogin(user)
    const { order_list } = await readBody(event)

    let mailOptions = {
    
        to: 'user1@example.com',
        subject: 'Nice Nodemailer test',
        text: 'AAAAAAAAAAAAAAAA ',
        html: `${{order_list}}`,
    };
    try {
        return await transport.sendMail(mailOptions)
    } catch(err) {
       console.log(err)
       return err
    }
});

问题出在前端传递的是DOM对象而非HTML字符串，以及后端模板字符串的错误写法，具体修正步骤如下：

1. 前端：传递DOM元素的HTML内容而非DOM对象 #

document.querySelector('table')获取到的是DOM元素对象，浏览器的console.log会友好展示元素结构，但实际传递给后端的是对象，需要先提取其HTML内容：

修正后的前端代码 #

// 获取table元素的HTML字符串，添加空值兜底
const orderList = document.querySelector('table')?.innerHTML || '';

sendMail(){
  $fetch("/api/prenota/mail",{
    method: "POST",
    body: {
      order_list: orderList // 传递HTML字符串而非DOM对象
    }
  });
  console.log(orderList)
},

额外提示：Vue组件内建议优先通过响应式数据生成HTML，再复用数据拼接字符串，尽量避免直接操作DOM，更符合Vue的设计逻辑。

2. 后端：修正模板字符串的错误写法 #

后端代码中html: ${{order_list}}是错误写法——${{order_list}}等价于在模板字符串里插入{order_list}这个对象，转成字符串自然就是[object Object]`，直接使用变量即可：

修正后的后端代码 #

export default defineEventHandler(async function(event) {
    const user = decodingUser(event)
    requireLogin(user)
    const { order_list } = await readBody(event)

    let mailOptions = {
        to: 'user1@example.com',
        subject: 'Nice Nodemailer test',
        text: 'AAAAAAAAAAAAAAAA ',
        html: order_list, // 直接传入HTML字符串
    };
    try {
        return await transport.sendMail(mailOptions)
    } catch(err) {
       console.log(err)
       return err
    }
});

额外注意点 #

• 可以给前端的orderList添加空值判断，避免邮件正文为空。
• 如果HTML内容存在XSS风险，建议在后端对HTML进行过滤处理。

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