遇到这个需求的时候，我下意识反应，要写行内样式，拷贝出 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 = 'https://www.it610.com/article/...' // 选中 textarea.select()// 复制 触发 copy 事件 document.execCommand('copy', true) document.body.removeChild(textarea) document.removeEventListener('copy', copyHandler) }
clipBoard.js
- 【html生成邮件签名】利用 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 `@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400; 700&display=swap); * { margin: 0; padding: 0; }${body}` }
- copy 出html字符串之后需要到邮箱客户端的签名配置地方去配置，比如下图是使用
spark邮箱客户端的配置的地方
文章图片
文章图片
