遇到这个需要的时候,我下意识反馈,要写行内款式,拷贝出 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>* {margin: 0; padding: 0;}</style></head><body>${body}</body></html>` }
- copy 出 html 字符串之后须要到邮箱客户端的签名配置中央去配置,比方下图是应用
spark
邮箱客户端的配置的中央