vue 生成二维码和生成海报

一、分别安装两个依赖包

npm i qrcodejs2 --save  //二维码的依赖包

npm install html2canvas --save  //用来生成海报的依赖包

二、引入安装的依赖包js

<script>
    import html2canvas from 'html2canvas';
    import QRCode from "qrcodejs2";
</script>

三、整体代码如下

<template>
  <div class="page-content">
    <div class="invitepage">
      <!-- 这块是显示生成海报的图片-->
      <img v-if="!test" :src="imgSrc" alt="第50届国际名家具展" />
       <!-- 这块是要生成海报的内容，生成海报图片后便隐藏起来-->
      <div v-else>
        <div class="baijing">
            <div class="top_img">
                <!-- 放置生成的二维码 -->
                <div ref="qrCodeUrl" class="qrcode"></div>
             </div>          
        </div>
        </div>
      </div>
    </div>
    <div class="download"><a  @click="btn" v-if="shuuju">点击生成海报长按保存分享好友</a></div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import QRCode from "qrcodejs2";
import backImg from "../assets/images/demo.png"; 
export default {
  props:['showchinese'],
  data() {
    return {
        test: true,
        imgSrc:backImg,
        shuuju:true,
        qrcodeText:"默认的二维码内容",
    };
  },
  methods:{
    // 生成二维码
    creatQrCode() {
      let a = new QRCode(
      this.$refs.qrCodeUrl, 
      {
        text: this.qrcodeText, // 需要转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: "black", //#000000为黑色
        colorLight: "white",
      });
    },
    // 生成海报
    btn() {
      this.shuuju=false
      //点击生成canvas转换成base64的图片
      const that = this;
      html2canvas(document.querySelector('.baijing')).then(function (canvas) {
        that.imgSrc = canvas.toDataURL();
      });
      this.$nextTick(() => {
        //隐藏元素
          this.test = false;
      });
    },
    // 重组url分享链接,在微信打开vue页面，首次打开有参数需要对参数编码处理
    funcUrlDel(){
        let baseUrl = 'https://ceshi.baidu.com/html/M50/dist/';
        let qdparam = `home?ly=fs&fcode=${this.$route.query.fs}`;
        let auto_url = encodeURIComponent(qdparam);
        let myurl = encodeURI( `${encodeURI(baseUrl)}?auto_url=${auto_url}#/home`);
        this.qrcodeText = myurl;
         // return myur
    },
  },
   mounted() {
    this.funcUrlDel();  
    this.creatQrCode(); //首次加载时便生成二维码
  }
  
};
</script>