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

image.png


大桔子
588 声望51 粉丝

下一步该干什么呢...