vue实现pdf文件发送到邮箱功能

最新推荐文章于 2024-04-21 19:39:10 发布

原创最新推荐文章于 2024-04-21 19:39:10 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #前端 #前端框架

Vue 同时被 2 个专栏收录

198 篇文章

订阅专栏

前端开发

140 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中实现在用户输入有效邮箱后，将PDF文件发送到该邮箱的功能。通过校验邮箱格式，调用sendEmail API发送邮件，并展示相应的成功或失败提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求： vue实现pdf文件发送到邮箱功能

<!-- 弹窗 -->
    <van-popup v-model="showEmail" closeable class="contactTel" :close-on-click-overlay="false" @close="closeEmail">
      <div class="popup-header fontSize36">
        发送至邮箱
      </div>
      <div class="popup-box fontSize36 color3">
        <div class="fieldInput mb50">
          <!-- <van-field v-model="electricalMail" name="email" ref="email" @click-input="handleClickInput" label="电子邮箱" placeholder="请输入您的电子邮箱"/> -->
          <span class="pr20 pl20 fontSize30">电子邮箱</span>
          <input label="电子邮箱" class="infoCenterText fontSize30" v-model="electricalMail" placeholder="请输入您的电子邮箱"/>
        </div>
        <van-button type="primary" color="#024EE0" class="popup-btn" @click="handleMsg">确认</van-button>
      </div>
</van-popup>

点击发送到邮箱方法：

handleMsg(){
      if(!this.electricalMail){
        this.$toast("邮箱不能为空");
        return;
      }else{
        let emailRegExp=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if(emailRegExp.test(this.electricalMail))	{

          let params = {
            url:this.historyObj.taxUrl,
            electricalMail:this.electricalMail
          }
          sendEmail(params).then(res=>{
            if(res.code == 200){
              this.$toast("已发至邮箱，请查看");
              this.showEmail = false;
            }else{
              this.$toast(res.msg);
            }
          })
        }else{
          this.$toast("邮箱格式不正确");
          return;
        }
      }
      
}