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 郵箱客戶端的配置的地方

html生成郵件簽名

原生copy事件

clipBoard.js

相關文章