<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();
};
}
}
};
参考链接:vue实现复制html字符串粘贴出来为html富文本