关于html:html生成邮件签名

遇到这个需要的时候，我下意识反馈，要写行内款式，拷贝出 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 邮箱客户端的配置的中央

原生copy事件

clipBoard.js