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 `${body}`
  }

• copy 出html字符串之后需要到邮箱客户端的签名配置地方去配置，比如下图是使用 spark 邮箱客户端的配置的地方