个人名片+微信名片二维码 VUE

个人名片

功能：根据数据库查出个人数据，生成个人名片，名片中有个人二维码，微信扫描二维码可快速保存联系人信息到手机通讯录。

vue中引入html2canvas实现将整块dom进行图片化

• 引包

npm install --save html2canvas

• 引入相关文件（在我的资源中有）
  

<template>
  <div class="container">
    <!--v-loading.fullscreen.lock 加载动画-->
    <div class="cardWrap" v-loading.fullscreen.lock="loading" element-loading-text="加载后，长按图片分享">

      <div class="card" ref="cardCanvas">
        <div class="card-info">
          <div class="card-imgwrap">
            <div class="card-empty" >
              <img class="card-empty-img1" src="../assets/logo3.png" />
            </div>
          </div>

          <div class="card-detail">
            <!--姓名-->
            <div class="name" v-model="user.ZUSERID">{{user.ZUSERNAME}}</div>

            <!--职位-->
            <div class="position" v-if="this.user.ZGSDMB == ''" style="font-weight: bold;">{{user.ZZHIWU}}</div>

            <!--公司-->
            <div class="companyName" >{{user.ZGSMCA}}</div>

            <!--公司-->
            <div class="companyName" >{{user.ZGSMCB}}</div>

            <!--职位2-->
            <!--<div class="position">职务2:{{user.ZZHIWU2}}</div>-->

            <div class="address" >地址:{{user.ZGSDZA}}</div>

            <div class="Tel" >电话:{{user.ZTELE}}</div>

            <div class="e-mail" >邮箱:{{user.ZMAILBOX}}</div>

            <div class="e-ZURL" >网址:{{user.ZURL}}</div>

            <!--二维码按钮，点击时生成二维码，在下面设置自动触发-->
            <button id="btn" hidden="hidden">二维码</button>
          </div>

          <!--编辑页面-->
          <!--
          弹出dialog对话框，
          :visible.sync="dialogVisible"  需要设置visible的sync属性，它接收Boolean，当为true时显示 Dialog。
          :before-close  点击x号时，提示信息
          slot="footer"  页脚信息
          -->
          <el-dialog title="编辑个人信息" :visible.sync="dialogFormVisible" width="90%" :fullscreen= "true"
                     :close-on-click-modal="false" :show-close = "false">
            <el-form class="dialogfrom"  >

              <el-form-item label="姓名:":label-width="formLabelWidth">
                <el-input v-model="user.ZUSERNAME" autocomplete="off" minlength="16" maxlength="19" ></el-input>
              </el-form-item>

              <el-form-item label="公司:"  :label-width="formLabelWidth">
                <el-select v-model="user.ZGSDMA"
                           placeholder="请输入公司"
                           style="width: 100%;">
                  <el-option v-for="(item,index) in companys" :key="index" :label="item.ZDESC" :value="item.ZVALUE">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="职位:" :label-width="formLabelWidth">
                <el-input v-model="user.ZZHIWU" autocomplete="off" minlength="16" maxlength="19" ></el-input>
              </el-form-item>

              <el-form-item label="公司2:" :label-width="formLabelWidth">
                <el-select v-model="user.ZGSDMB"
                           placeholder="请输入公司2"
                           style="width: 100%;">
                  <el-option v-for="(item,index) in companys" :key="index" :label="item.ZDESC" :value="item.ZVALUE">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="职位2:" :label-width="formLabelWidth">
                <el-input v-model="user.ZZHIWU2" autocomplete="off" minlength="16" maxlength="19" ></el-input>
              </el-form-item>

              <el-form-item label="电话:" :label-width="formLabelWidth">
                <el-input v-model="user.ZTELE" autocomplete="off" minlength="16" maxlength="19" ></el-input>
              </el-form-item>

              <el-form-item label="邮箱:" :label-width="formLabelWidth">
                <el-input v-model="user.ZMAILBOX" autocomplete="off" minlength="16" maxlength="19" ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="saveCard" size="small">确 定</el-button>
            </div>
          </el-dialog>

        </div>

        <!--jh静态图片-->
        <div ref="jhImg">
          <img src="../assets/jhImg.jpeg" style="width: 100%;margin-bottom: -6px;">
        </div>

        <!--二维码-->
        <div class="card-code" v-if="cardSaveTxtStatus === 1">
          <!--响应性式布局，两行四列-->
          <!--第一行-->
          <el-row :gutter="10">
            <el-col :xs="3" :sm="3" :md="4" :lg="3" :xl="1">
              <div class="grid-content"></div>
            </el-col>
            <el-col :xs="9" :sm="9" :md="8" :lg="9" :xl="11">
              <div class="grid-content" id="qrcode">
                <img id="qrCodeIco" src="../assets/logo8.jpg" style="position: absolute;width: 20px; height: 20px; margin: 25.5px;" />
              </div>
            </el-col>
            <el-col :xs="9" :sm="9" :md="8" :lg="9" :xl="11">
              <div class="grid-content">
                <img class="officialWebsite" src="../assets/官网.png">
              </div>
            </el-col>
            <el-col :xs="3" :sm="3" :md="4" :lg="3" :xl="1">
              <div class="grid-content"></div>
            </el-col>
          </el-row>
          <!--第二行-->
          <el-row :gutter="10">
            <el-col :xs="0" :sm="1" :md="4" :lg="3" :xl="1">
              <div class="grid-content"></div>
            </el-col>
            <el-col :xs="12" :sm="11" :md="8" :lg="9" :xl="11">
              <span class="grid-content">长按识别添加至通讯录</span>
            </el-col>
            <el-col :xs="9" :sm="9" :md="8" :lg="9" :xl="11">
                <span class="grid-content">长按识别关注官微</span>
            </el-col>
            <el-col :xs="3" :sm="3" :md="4" :lg="3" :xl="1">
              <div class="grid-content"></div>
            </el-col>
          </el-row>
          <div ref="cloudImg">
            <img src="../assets/云彩.png" style="width: 100%;margin-bottom: -6px;">
          </div>
        </div>

        <!--ref='cardSave'获取这个dom元素，保存图片的时候，把该dom除外-->
        <!--<div class="card-share" ref='cardShare'>
          <div class="card-shareTxt"  @click="saveImage">分享</div>
        </div>-->
        <div class="card-share" ref='cardShare'>
          <div class="card-shareTxt" v-if="cardSaveTxtStatus === 1"  @click="editCard">编辑</div>
          <div class="card-shareTxt" v-if="cardSaveTxtStatus === 2"  @click="saveCard">保存</div>
        </div>

        <div class="card-save" ref='cardSave'>
          <!--<div class="card-saveTxt" v-if="cardSaveTxtStatus === 1" @click="editCard()">编辑</div>-->
          <div class="card-saveTxt" @click="saveImage">分享</div>
        </div>

      </div>

    </div>
  </div>
</template>

<script src="../../static/js/jquery.min.js"></script>
<script src="../../static/js/qrcode.js"></script>
<script src="../../static/js/kk-1.3.10.min.js"></script>

<script>
  import html2canvas from 'html2canvas';
  import axiosInstance from "../utils/request";
  export default {
    name: "MyCard",
    inject: ['reload'],
    data: function () {
      return {
        loading: false,
        vision: "",
        formLabelWidth: '60px', //form的宽度
        dialogFormVisible: false,   //  弹出框标记位
        option: [{
          ZVALUE: '',  // 代码
          ZDESC: ''  // 名称
        }],
        QrImg: "", //二维码地址
        position: "",
        companyCode:'',
        company_:'',
        zgsdma:'',
        //下拉数据
        companys: [],//公司，jsonarray
        user: {},//用户信息，jsonobject
        zhiwu:'',
        selected:"",
        dataURL: '',
        cardUserName: '', // 当前商户的昵称
        currentQrCode: '', // 当前名片的二维码数据
        cardSaveTxtStatus: 1, // 名片右上角编辑按钮状态 1-不可编辑 2-可编辑
        form: {
          region: {
            "re" : ["asdf"]
          }
        }
      }
    },
    methods:{
      /*一进个人名片发送查询请求*/
      created(){
        // 获取到员工号，存到浏览器的session
        const customUser = sessionStorage.getItem('user');
        axiosInstance.post("/mycard/select",
          //  kk员工号  100267
          [{ZFIELD: "ZUSERID",ZVALUE: "100942"}],
          {headers: {'Content-Type': 'application/json'}}).then(result =>{
          this.user = result.data.data.userList[0];
          // jQuery生成二维码
          var name, company, title, address, mobile, email, web, desc;
          let u = this.user;

          $("#btn").one("click",function() {
            name = "FN:" + u.ZUSERNAME + "\n";        //姓名
            company = "ORG:" + u.ZGSMCA + "\n";      //公司
            title = "TITLE:" + u.ZZHIWU + "\n";        //职务
            address = "ADR;WORK:" + u.ZGSDZA + "\n";     //地址
            mobile = "TEL;TYPE=work:" + u.ZTELE + "\n";        //手机
            email = "EMAIL;TYPE=pref:" + u.ZMAILBOX + "\n";        //邮箱
            //web = "URL:" + u.ZURL + "\n";              //网址

            var info = "BEGIN:VCARD\n" + name + company + title + email + mobile + address + "END:VCARD";

            //生成二维码
            var qrcode = new QRCode("qrcode");
            qrcode.makeCode(info);
            // var margin = ($("#qrcode").width() - $("#qrCodeIco").width()) / 2; //控制Logo图标的位置
            // $("#qrCodeIco").css("margin", 25.5px);
            //
            $("#qrcode img:not('#qrCodeIco')").css("width","70px");
          })
          //id为btn的按钮，自动触发点击事件
          $("#btn").trigger("click");
        })
      },
      /* 保存图片的方法（即按钮点击触发的方法）
        第一个参数为需要保存的div的id名
        第二个参数为保存图片的名称 */
      saveImage(){
        this.loading = true;
        // cardCanvas要生成图片的dom元素，cardSave要剔除的dom元素
        let canvasID = this.$refs.cardCanvas
        let removeDiv = this.$refs.cardSave
        let removeDiv2 = this.$refs.cardShare
        canvasID.removeChild(removeDiv);
        canvasID.removeChild(removeDiv2);

        /*把对应的dom生成图片*/
        html2canvas(canvasID, {
          backgroundColor: null     // 解决生成的图片有白边
        }).then(canvas => {
          canvasID.appendChild(removeDiv)
          canvasID.appendChild(removeDiv2)
          // 返回图片的二进制数据
          let dataURL = canvas.toDataURL('image/png');
          this.dataURL = dataURL
          //console.log(dataURL);
          console.log(this.user.ZUSERID);

          this.vision = Math.random().toString(12).substr(2);
          console.log(this.vision);
          // 把图片保存到服务器
          axiosInstance.post("/mycard/getImg",
            {binaryImg:this.dataURL, userId:this.user.ZUSERID ,vision:this.vision},
            {headers: {'Content-Type': 'application/json'}}).then(result =>{
            //console.log('地址'+'http://zmsg.jangho.com:8085/image/'+this.user.ZUSERID+this.vision+'.jpg')
            //this.vision = this.vision+1;
            //console.log('地址'+'http://zmsg.jangho.com:8085/image/'+this.user.ZUSERID+this.vision+'.jpg')

            this.loading = false;
            // kk中分享图片
            kk.media.previewImage({
              paths: [
                'http://zmsg.jangho.com:8085/image/'+this.user.ZUSERID+this.vision+'.jpg',
              ],
              operations: true
            }, function(code, msg){
              this.vision = this.vision+1;
              alert('错误信息:' + msg + ',错误代码:' + code);
            });
            this.vision = this.vision+1;
          });
          //保存到本地（手机上）
          //this.saveFile(dataURL, 'wahaha')
        })

      },
      editCard () { // 点击编辑按钮
        // 显示dialog
        this.dialogFormVisible = true;
        this.cardSaveTxtStatus = 2;
        // 公司名称和公司代码查询
        axiosInstance.post("/mycard/dropDown","",{headers: {'Content-Type': 'application/json'}}).then(result =>{
          this.companys = result.data.data.company;
        })
      },
      open(msg) {
        this.$confirm('您暂未填写'+msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({type: 'success', message: '请再次填写!'});
        })},
      saveCard () { // 点击保存按钮
        this.cardSaveTxtStatus = 1;
        let msg = "";
        let flag = 0; //flag = 1 需要跳出提醒
        if (this.user.ZGSDMB != "" && this.user.ZZHIWU2 == ""){
          msg = msg.concat(" 职位2");
          flag = 1;
        }
        if (this.user.ZGSDMB == "" && this.user.ZZHIWU2 != ""){
          msg = msg.concat(" 公司2");
          flag = 1;
        }
        if (this.user.ZUSERNAME == ""){
          msg = msg.concat(" 姓名");
          flag = 1;
        };
        if (this.user.ZGSDMA == ""){
          msg = msg.concat(" 公司");
          flag = 1;
        };
        if (this.user.ZZHIWU == ""){
          msg = msg.concat(" 职务1");
          flag = 1;
        };
        if (this.user.ZTELE == ""){
          msg = msg.concat(" 电话");
          flag = 1;
        };
        if (this.user.ZMAILBOX == ""){
          msg = msg.concat(" 邮箱");
          flag = 1;
        };
        if(flag == 1){//开启消息提示框
          //this.$toast.fail(msg+"不能为空！")
          this.open(msg);
        }else if(flag == 0){//关闭消息提示框
          axiosInstance.post("/mycard/update",
            [this.user],
            {headers: {'Content-Type': 'application/json'}}).then(result =>{
            this.created();
            this.dialogFormVisible = false;
            // console.log(result.data.data.promptMsg[0].MSGTX);
          });
        }
      },
      saveFile (data, filename) {
        let saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
        saveLink.href = data
        saveLink.download = filename
        let event = document.createEvent('MouseEvents')
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
        saveLink.dispatchEvent(event)
      }
    },
    mounted() {
      // 生命周期创建时
      this.created();
    }
  }

</script>
<style scoped>
  .container {
    width: 100%;
    height: calc((100vh - 40px));
    background: #fff;
  }
  .container img[lazy=loading] {
    padding: 40%;
  }
/*  .container img {
    width: 100%;
  }*/
  .officialWebsite{
    width: 70px;
  }
  .companyName{
    font-weight: bold;
  }
  .cardImg{

  }
  #qrcode img{
    display: block;
    width: 70px;
  }
  #btn{
    width:100px;
    height:40px;
    text-align: center;
    line-height: 40px;
    background: #6c0;
  }
  .cardWrap {
    padding: 10px 6% 10px;
    background: #fff;
  }
  .card {
    position: relative;
  }
  .card-info {
    background-color: #f7f5f6;
    padding: 30px 0 30px 5px;
  }
  .card-bottom {
    height: 46px;
    padding: 5px 0;
    background: linear-gradient(to right, #63a3d1, #c8e5f1);/*渐变色*/
    color: #fff;
    text-align: center;
    font-size: 12px;
    box-sizing: border-box;
  }
  .card-bottom .txt {
    width: 200px;
    line-height: 18px;
  }
  .card-save {
    position: absolute;
    right: 0;
    top: 0px;
    width: 0;
    height: 0;
    font-size: 10px;
    color: #fff;
    border-width: 0px 45px 45px 0;
    border-style: solid;
    border-color: transparent #009900;
  }
  .card-share {
    position: absolute;
    left: 0;
    top: 0px;
    width: 0;
    height: 0;
    font-size: 10px;
    color: #fff;
    border-width: 0px 0 45px 45px;
    border-style: solid;
    border-color: transparent #009900;
  }
  .card-saveTxt {
    width: 45px;
    height: 45px;
    transform-origin: bottom center;
    transform: rotate(45deg);
    position: absolute;
    display: inline-block;
    width: 45px;
    right: -37px;
    top: 3px;
  }
  .card-shareTxt {
    width: 45px;
    height: 45px;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-transform: rotate(
      275deg
    );
    transform: rotate(
      315deg
    );
    position: absolute;
    display: inline-block;
    width: 45px;
    right: -25px;
    top: -12px;
  }
  /*.cardWrap-txt {
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    text-align: center;
  }
  .cardWrap-txt .grey {
    margin: 5px 0 0 0;
    color: #111111;
    font-weight: bold;
  }*/
  .card-code {
    background-color: #eeeced;
    /*position: absolute;*/
    right: 4%;
    bottom: -12px;
    /*color: #fff;*/
    font-size: 12px;
    text-align: center;
  }
  .qrcode {
    display: inline-block;
    height: 54px;
    width: 54px;
    line-height: 54px;
    text-align: center;
    background: #fff;
  }
  .qrcode img {
    height: 48px;
    width: 48px;
    vertical-align: middle;
  }
  .grid-content {
    font-size: 12px;
    color: grey;
    border-radius: 4px;
    min-height: 36px;
  }
  .triangle-up {
    display: inline-block;
    margin-right: 4px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #fff;
  }
  .card-imgwrap{
    width: 65px;
    height: 86px;
    float: left;
    margin-right:10px;
  }
  .card-imgwrap>img{
    width: 100%;
    height: 100%;
  }
  .card-empty {
    height: 100%;
    background: #f7f5f6;
    text-align: center;
    color: #333;
    font-size: 10px;
    vertical-align: middle
  }
  .card-empty .card-empty-img1{
    margin-top: 45px;
    width: 99px;
  }
  .card-empty{
    margin-top:10px;
    width: 92px;
  }
  .card-detail{
    color: #666;
    font-size: 10px;
    line-height: 19px;
    padding-left: 32px;
    overflow: hidden;
  }
  .card-detail img{
    width: 12px;
    vertical-align: middle;
  }
  .name{
    font-size: 18px;
    line-height: 26px;
    font-weight: bold;
  }
  .card-detail .name .card-detail .tel{
    color:#333
  }
  .card-detail .edit-name{
    z-index:999;
  }
  .card-switch{
    top: 15px;
    line-height:13px;
    font-size: 13px;
    position: relative;
  }
  .address{
    display: inline-block;
  }
  .el-input {
    position: relative;
    font-size: 14px;
    width: 120px;
    display: inline-block;
    width: 70%;
    height: 70%;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 13px;
    height: 80%;
  }
  .el-dialog__headerbtn .el-dialog__close {
    display: none;
  }
  .el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 11px 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 135%;
  }
</style>
<style>
  .el-message-box {
    width: 260px;
  }
</style>

第一次写vue，还请大家多多指点。