一、分别安装两个依赖包
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">
<!-- 设置了两个块区域
当点击了生成海报时把canvas转换成base64的图片,
然后把最开始当样式隐藏掉 把获取的的base64的地址赋值给src-->
<img v-if="!test" :src="imgSrc" alt="展览会" />
<div v-else>
<div class="baijing">
<div class="img">
<img src="@/assets/images/share1.png" alt="展览会">
</div>
<div class="img ">
<img src="@/assets/images/share2.png" alt="展览会">
</div>
<div class="img qrcode_">
<img src="@/assets/images/share3.png" alt="展览会">
<!-- 二维码生成 -->
<div class="qrcode render_sharefs">
<span class="qq" ref="qrCodeUrl"></span>
</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: 200,
height: 200,
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(() => {
//生成过程中,一闪过切换显示demo图片,页面不留白
this.test = false;
});
},
funcUrlDel(){
// 重组url分享链接,在微信打开vue页面,首次打开有参数需要对参数编码处理
// 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;
let myurl = `https://xxxx.com/html/M52/dist/#/home?ly=fs&fcode=${this.$route.query.fs}`;
this.qrcodeText = myurl;
},
},
mounted() {
this.funcUrlDel();
this.creatQrCode(); //首次加载时便生成二维码
}
};
</script>