html生成邮件签名

站长

2022年09月09日 00:19 · 阅读数 25

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

html生成邮件签名

html生成邮件签名

原生copy事件

clipBoard.js