遇到这个需求的时候，我下意识反应，要写行内样式，拷贝出 HTML 字符串，事实确实也是如此，记录一下在开发中遇到的问题
- 一个有用的示例阅文邮件签名前端生成工具
- 重点：自定义签名的主体必须要用
table标签来写，不然会出现意想不到的样式错乱
原生copy事件
- 最开始由于不太理解邮箱签名是个什么东西，怎么生成，以为是直接复制出一段
富文本呢，所以一开始使用下面的代码做的，倒是也能实现效果，而且可以直接粘贴进富文本的输入框，比如：写邮件的输入框，注意如果以html形式copy，不能将copy的内容粘贴微信等聊天工具的输入框，text模式可以随便粘贴， 代码如下：
const handleCopy = type => {
const mailDom = document.querySelector('.profile-email-signature')
let mailContent = ''
let clipType = ''
if (type === 'html') {
mailContent = mailDom.innerHTML
// 以html格式拷贝
clipType = 'text/html'
} else {
mailContent = mailDom.innerText
// 以普通文本拷贝
clipType = 'text/plain'
}
const copyHandler = event => {
console.log('copy事件触发')
event.clipboardData.setData(clipType, mailContent)
event.preventDefault()
}
// 监听copy事件
document.addEventListener('copy', copyHandler)
// 为兼容Safari必须创建textarea
const textarea = document.createElement('textarea')
document.body.appendChild(textarea)
// 隐藏此输入框
textarea.style.position = 'absolute'
textarea.style.clip = 'rect(0 0 0 0)'
// 赋值
textarea.value = '...'
// 选中
textarea.select()
// 复制 触发 copy 事件
document.execCommand('copy', true)
document.body.removeChild(textarea)
document.removeEventListener('copy', copyHandler)
}
clipBoard.js
- 利用 clipBoard.js 将目标dom变成html复制出来，然后借助 email 客户端的
签名 html渲染，实现自定义签名，代码如下：
const handleCopy = type => {
new Clipboard('.copy-btn', {
text: function (trigger) {
const mailDom = document.querySelector('.profile-email-signature')
let mailContent = ''
if (type === 'html') {
mailContent = getHTMLStr(mailDom.innerHTML)
} else {
mailContent = mailDom.innerText
}
return mailContent
},
})
toast.success('Copy Success!')
}
// 因为需要特殊的字体，所以需要加载字体文件
const getHTMLStr = body => {
return `<html><head><style>@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);* { margin: 0; padding: 0; }</style></head><body>${body}</body></html>`
}
- copy 出html字符串之后需要到邮箱客户端的签名配置地方去配置，比如下图是使用
spark邮箱客户端的配置的地方
