将邮件模板内容拷贝到邮箱中（含样式）_vue2 复制一个表格样式到邮件-CSDN博客

本文链接：https://blog.csdn.net/dreamy_wx/article/details/122945617

本文介绍了一种使用Vue.js实现的方法，通过点击按钮复制邮件模板内容到剪贴板，并在1秒后自动打开系统邮件客户端，预填收件人和邮件主题。内容包括动态渲染的报销问题详情，涉及HTML字符串复制、事件监听和延迟执行等功能。

摘要由CSDN通过智能技术生成

注：邮件样式仅支持行内，且不支持部分CSS3样式

<div>
    <div class="fixBtn">
      <el-button type="primary" @click="copyInfo()">复制</el-button>
    </div>
    <!-- 复制内容开始 -->
    <div ref="htmlData">
      <div style="width: 700px;margin: 0 auto 60px;border: 1px solid #dddddd;border-top: 10px solid #666;font-size: 14px;padding: 15px 0;">
        <div style="border-bottom: 1px dashed #dddddd;text-align: justify;padding: 15px 0;">
          <div style="margin: 0 15px;">
            Dear 【{{name}}】，您好！<br />我们正在处理 Report ID {{reportKeyNum}}的报销费用，遇到以下问题，请检查：
          </div>
        </div>
        <div class="emailTable" style="margin: 15px;">
          <div v-for="(item,index) in newData" :key="index">
            <div class="itemList" style="margin-bottom:15px;">
              <div style="font-weight:bold">
              （{{index + 1}}）{{item.date}}【 {{item.expenseType}} / CNY {{item.amount}}元】
              </div>
              <div style="margin-left:30px;color:#c80000">存在的问题：</div>
              <div style="margin-left:30px;">{{result}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 复制内容结束 -->
  </div>

export default {
  name: "",
  data() {
    return {
      newData: [],
      result: "",
      tableCont: null,
      timer: null,
      auditpeople: this.$store.getters.userInfo.username,
    };
  },
  mounted() {
    //数据处理等逻辑
  },

  methods: {
    copyInfo() {
      //文本赋值
      this.tableCont = this.$refs.htmlData.innerHTML;
      this.copyEdit(this.tableCont);
      this.$message({
        type: "success",
        message: "已复制到剪切板~"
      });
      //邮箱主题内容
      let subject = `关于您的报销单${reportKeyNum} 的问题`;
      this.timer = setTimeout(() => {
        //打开系统默认邮件 自动带入收件人邮箱及主题
        window.location.href = `mailto:${收件人邮箱}?subject=${subject}`;
      }, 1000);
    },
    //样式拷贝
    copyEdit(val) {
      let copyHandler = this.copys(val);
      document.addEventListener("copy", copyHandler);
      document.execCommand("copy");
      removeEventListener("copy", copyHandler);
    },
    copys(article) {
      return function(event) {
        event.clipboardData.setData("text/html", article);
        event.preventDefault();
      };
    }
  }
};