vue实现pdf文件发送到邮箱功能的示例代码

需求： 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;
        }
      }
}

到此这篇关于vue实现pdf文件发送到邮箱功能的文章就介绍到这了,更多相关vue文件发送到邮箱内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue将html页面生成高清晰pdf文件的方法

    vue将html页面生成高清晰pdf文件的方法

    目录 效果图如下 流文件转成file 总结 需要借助html2canvas和jspdf这两个插件 首先是将页面用html2canvas生成base64的图片,再用jspdf将图片插入到pdf 效果图如下 createImage(){//生成图片->pdf let _this = this; //----此处是解决页面带滚动条的时候截图不全问题 window.pageYoffset = 0; document.documentElement.scrollTop = 0; document.body

  • vue使用pdf.js预览pdf文件的方法

    vue使用pdf.js预览pdf文件的方法

    我们在页面进行pdf预览的时候,由于有些文件不能够进行打印和下载,这时候我们使用window自带的pdf就很难满足客户的需求,因此需要另外的办法来支持我们进行特殊条件的pdf文件预览,这里我采用引入pdf.js文件的形式来达到目的. 第一步:下载pdf.js 引入pdf.js文件 地址如下:http://mozilla.github.io/pdf.js/getting_started/ 第二步,vue引入 我这里是把下载下来的文件放在了根目录的piblic下 第三步,使用 主要是地址"/buil

  • 如何在vue中使用pdfjs预览pdf文件

    如何在vue中使用pdfjs预览pdf文件

    目录 前言 在写项目的过程中,偶尔会有使用到pdf的文件,当我们想看pdf文件的时候,你的操作是不是先把pdf文件下载下来,通过电脑安装的专用于打开pdf的软件来查看pdf文件呢.如果有个需求说不要让用户安装软件呢,毕竟还是有很多用户不知道怎么安装软件或者这个东西需要什么东西才能打开嘛.ok,有了这样的需求那我们是不是也得去实现嘛,毕竟这理由咱也没法反驳啊. 思考 既然都提出来了,那就想想怎么使用咯.既然需要用到pdf.不知道有没有关于js能够操作的库文件来帮我呢?果断一百度,咱们今天的主角就来

  • Vue实现在线预览pdf文件功能（利用pdf.js/iframe/embed）

    Vue实现在线预览pdf文件功能（利用pdf.js/iframe/embed）

    前言 最近在做一个精品课程,需要在线预览课件ppt,我们的思路是将ppt转换为pdf在线预览,所以问题就是如何实现在线预览pdf了. 在实现的过程中,为了更好地显示效果,我采用了多种不同的方法,最终选择效果最好的pdf.js. 实现方法: 1:iframe 采取iframe将pdf嵌入网页从而达到预览效果,想法很美好,实现很简单,但显示很残酷- 虽然一行代码简洁明了,打开谷歌浏览器效果也还行,但缺点也是十分明显的!!!! <iframe src="http......" widt

  • vue中手机号,邮箱正则验证以及60s发送验证码的实例

    今天写了一个简单的验证,本来前面用的组件,但是感觉写的组件在此项目不是很好用,由于用到的地方比较少,所以直接写在了页面中. <div> <p class="fl"> <input name="phone" type="number" placeholder="手机号" v-model="phone"/> <button type="button"

  • vue实现pdf文件发送到邮箱功能的示例代码

    vue实现pdf文件发送到邮箱功能的示例代码

    需求: vue实现pdf文件发送到邮箱功能 <!-- 弹窗 --> <van-popup v-model="showEmail" closeable class="contactTel" :close-on-click-overlay="false" @close="closeEmail"> <div class="popup-header fontSize36"> 发送

  • vue实现禁止浏览器记住密码功能的示例代码

    查找资料 网上查到的一些方法: 使用 autocomplete="off"(现代浏览器许多都不支持) 使用 autocomplete="new-password" 在真正的账号密码框之前增加相同 name 的 input 框 使用 readonly 属性,在聚焦时移除该属性 初始化 input 框的 type 属性为 text,聚焦时修改为 password 使用 type="text",手动替换文本框内容为星号 "*" 或者

  • Vue后台实现点击图片放大功能的示例代码

    目录 需求 代码 父组件 子组件 dom.js util.js types.js 需求 点击小图可以放大,放大后,通过手势等比例放大缩小.左右切换图.旋转.关闭.由于element-ui版本较低不支持使用图片放大的image组件. 代码 父组件 <template> <div> <!-- 放大图 --> <el-image-viewer v-if="showImg" :on-close="closeViewer" :src=

  • VUE饿了么树形控件添加增删改功能的示例代码

    VUE饿了么树形控件添加增删改功能的示例代码

    本文介绍了VUE饿了么树形控件添加增删改功能的示例代码,分享给大家,具体如下: element-ui树形控件:地址 在原文档中有个案例是有新增和删除功能,但是后来发现其修改的数据并不能直接影响到树形数据,所以采用了 render-content 的API重新写了个组件. 写个开发的步骤,所以文章比较长emmm 大致效果如图: 1.省市API 在网上复制了个省市的list,有两个属性是新增的 isEdit :控制编辑状态 maxexpandId :为现下id的最大值 export default{

  • vue.js 使用axios实现下载功能的示例

    本文主要来源于知乎一个回答,这里红色部分做了自己的处理,虽然自己的少,可是很有用的几句代码哦 只好回答一下axios如何拦截get请求并下载文件的了. Ajax无法下载文件的原因 浏览器的GET(frame.a)和POST(form)请求具有如下特点: response会交由浏览器处理 response内容可以为二进制文件.字符串等 Ajax请求具有如下特点: response会交由Javascript处理 response内容仅可以为字符串 因此,Ajax本身无法触发浏览器的下载功能. Axi

  • Vue 中使用vue2-highcharts实现top功能的示例

    1.要实现的效果如下图: 2.首先项目中引用vue2-highcharts package.json中如下: 在命令行中输入: cnpm install vue2-highcharts 3.页面代码如下: <template> <div > <div> <div id="transparent-header" class="rank-head container" > <img src="../asse

  • 使用vue + less 实现简单换肤功能的示例

    做的换肤效果比较简单,只是顶部导航背景色的改变.下面是效果图. 首先,先说一下我最初的思路. 我最初的想法是使用less定义变量,然后通过js来切换变量,通过切换的变量来达到换肤的效果. 我先新建了一个 theme.less文件,代码如下: @theme:@themea; @themea:pink; @themeb:blue; @themec:gray; 如我最开始的想法,应该是通过点击事件来改变变量 @theme 的值. 我用了element-ui这个框架,所以我的下拉菜单的代码也不复杂: <

  • vue实现树形结构样式和功能的实例代码

    一.主要运用element封装的控件并封装成组件运用,如图所示 代码如图所示: 下面是子组件的代码: <template> <ul class="l_tree"> <li class="l_tree_branch" v-for="item in model" :key="item.id"> <div class="l_tree_click"> <butt

  • vue使用微信扫一扫功能的实现代码

    第一步: 安装weixin-js-sdk 和 jquery 包 npm install weixin-js-sdk jquery 第二部: 配置wx.config (配置都是后端返回来的,菜鸟前端只需要按需传值过去就可) 代码如下 import wx from "weixin-js-sdk"; import $ from "jquery"; goSao() { //这里[url参数一定是去参的本网址],请求后端接口换取signature //(兼容安卓和ios) l

  • vue商城中商品“筛选器”功能的实现代码

    在使用vue搭建商城项目的时候,要实现一个商品筛选器的功能,在完成之后,再一次被vue的数据驱动的强大感到震撼! 首先,我们来看一下具体的需求吧.你可以先看下面的这两张图,然后再看文字描述,可能会更容易理解. 没有触发时的状态 触发后的状态 我们需求有下面几点:        1.默认情况下,只显示一级菜单,二级菜单不显        2.存在二级菜单的情况下,在二级菜单没有显示的情况下,点击一级菜单,一级菜单的样式发生改变,二级菜单不显示        3.存在二级菜单的情况下,一级菜单已经点

随机推荐