前端Vue如何配合后端调用腾讯邮箱接口实现发送邮件(PDF附件)

之前在写发邮件这个功能时踩过太多的坑，现在以此文记录一下~

接口参数

一般腾讯邮箱接口发送都有必须的五个参数，reporter(收件人),ccs(抄送人),subject(邮件主题)，body(邮件正文:正文一般由html+css组成)，local_files(邮件附件：本文使用的附件是pdf)

实现过程

获取邮件正文内容并进行组装FormData格式数据

注：在vue中邮件正文不推荐使用<style scoped></style>,因为我们都知道scoed属性会与html标签生成唯一的序列号进行匹配，就算强行用js语法去除序列号，在网页版的腾讯邮箱可以正常看到，但是在客户端(如：foxmail等)因为编码解码格式不一样也会导致样式无法生效，且如果套用了ui框架，也会获取多余的css进行干扰，所以在这里建议写成行内样式。 

 //发送邮件
    async submitSendEmail () {
      //防抖
      if (this.timer != null) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        //html 样式获取
        let htmlElement = document.querySelector(
          `.print-container`
        )
        let htmlData = htmlElement.cloneNode(true)
        //采用读取本地文件的方式
        let footer = document.createElement('div')
        footer.innerHTML = `页脚内容，可以写入html标签`

        let bodyEmail = htmlData.outerHTML + footer.outerHTML

        const form = new FormData();
        form.append("recipient_id", '小明');
        form.append("cc_ids", "1,2,3,4");
        form.append("subject", this.recordTitle);
        form.append("body", bodyEmail);
        this.exportPDF().then(res => {
          //这里将pdf的base64位生成文件流作为附件
          let file = this.dataURLtoFile(res, this.recordTitle + '.pdf')
          form.append("local_files", file);
          sendEmail(form).then(res => {
            if (res.code == 200) {
              this.msgSuccess("邮件发送成功")
            }
          }).catch(err => {
            this.emaliLoading = false
            this.cancelSendEmail()
            this.dialogVisible = false
          })
        })
      }, 3000)
    },

如何进行PDF导出可以看我上一篇文章https://blog.csdn.net/weixin_46084072/article/details/131866799?spm=1001.2014.3001.5502

 

注：在pdf生成html2canvas转jspdf后，需要使用jspdf的PDF.output返回base64格式数据,而且pdf转换过程需要利用到promise.then异步处理（pdf转换时间过长），待base64数据成功返回后再转化为文件流

  var pdfData = PDF.output('datauristring')
    resolve(pdfData)
    return 

封装的base64数据转文件流 

//base64转文件流
Vue.prototype.dataURLtoFile = function(base64, filename) {
  var arr = base64.split(","),
  mime = 'application/pdf',

  bstr = atob(arr[1]),
  n = bstr.length,
  u8arr = new Uint8Array(n);
while (n--) {
  u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}