关于html:html生成邮件签名

70次阅读

共计 1718 个字符，预计需要花费 5 分钟才能阅读完成。

遇到这个需要的时候，我下意识反馈，要写行内款式，拷贝出 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 将指标 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>`
}