使用 iview 实现PC端生成推广海报与二维码并下载的功能，基于iview Modal 对话框与 Carousel 走马灯组件实现

前言：最近在对公司网页进行改版的时候遇到一个问题，需要在PC端实现一个功能，生成三张推广海报和用户邀请链接的二维码，由于有三张推广海报的背景图可供用户选择下载，于是我想到一个实现的方法：点击 “一键生成推广海报” 按钮，弹出一个模态框，里面是一个由三张背景图组成的轮播图，当用户点击"确定"按钮之后，将当前轮播的背景图作为推广海报下载到本地。

1.使用 iview Modal 对话框

<!-- 生成推广海报的按钮 -->
<div class="bill-btn"><Button class="bill" style="height:40px" @click="modal1=true;">一键生成推广海报</Button>
</div>```<!-- 推广海报的模态框 --><Modalv-model="modal1"width="330"@on-ok="ok"@on-cancel="cancel":closable="false"></Modal>

2.在对话框中添加 iview Carousel 走马灯

注意：
1.要给carousel加一个v-if指令，值与控制Modal的booean值绑定，这样carousel就会延迟初始化，不然 carousel 里面的图片会不显示

<!-- 生成推广海报的按钮 -->
<div class="bill-btn"><Button class="bill" style="height:40px" @click="modal1=true;">一键生成推广海报</Button>
</div><Modalv-model="modal1"width="330"@on-ok="ok"@on-cancel="cancel":closable="false"><Carousel v-model="value1" v-if="modal1" :dots="setting.dots"<CarouselItem><div><img src="../../assets/img/Poster1.png" width="100%" height="100%" alt=""> </div></CarouselItem><CarouselItem>  <div><img src="../../assets/img/Poster2.png" width="100%" height="100%" alt=""></div></CarouselItem><CarouselItem><div><img src="../../assets/img/Poster3.png" width="100%" height="100%" alt=""></div></CarouselItem></Carousel></Modal>

3.生成二维码

生成二维码的代码是看了另一位大佬的文章，感谢大佬
以下是原文链接https://blog.csdn.net/zuorishu/article/details/83866234

1.npm安装：npm install qrcanvas

2.并在当前页面引入：import { qrcanvas } from ‘qrcanvas’;

<div class="container"><div class="box" ref="box"><div id="qrcode"></div></div>
</div>

3.以下是js部分

qrcode() {  let qrcode = new QRCode("qrcode", {// 这一行代码是先清空再生成,防止多次点击多次生成document.getElementById("qrcode").innerHTML = "";width: 40, // 设置宽度height: 40, // 设置高度text: this.inviteLink, // 用户的邀请链接});},setQRCode() {this.$nextTick(function() {this.qrcode();});},

4.将二维码与背景图片组合

注意：
1.class名称不同是为了调整不同背景图中二维码的位置
2.id名称不同是为了同时在三张背景图中生成二维码，如果id相同，那么三张背景图中只会在第一张中生成二维码

以下是html部分：

<Carousel v-model="value1" v-if="modal1" :dots="setting.dots"<CarouselItem><div><img src="../../assets/img/Poster1.png" width="100%" height="100%" alt=""> <div class="qrCode1" id="qrcodeFirst" ref="qrcode"></div></div></CarouselItem><CarouselItem>  <div><img src="../../assets/img/Poster2.png" width="100%" height="100%" alt=""><div class="qrCode2" id="qrcodeSecond" ref="qrcode"></div></div></CarouselItem><CarouselItem><div><img src="../../assets/img/Poster3.png" width="100%" height="100%" alt=""><div class="qrCode3" id="qrcodeThird" ref="qrcode"></div></div></CarouselItem></Carousel>

以下是修改后的Js代码部分

qrcode() {document.getElementById("qrcodeFirst").innerHTML = "";document.getElementById("qrcodeSecond").innerHTML = "";document.getElementById("qrcodeThird").innerHTML = "";let qrcode1 = new QRCode("qrcodeFirst", {width: 40, // 设置宽度height: 40, // 设置高度text: this.inviteLink,});let qrcode2 = new QRCode("qrcodeSecond", {width: 40, // 设置宽度height: 40, // 设置高度text: this.inviteLink,});let qrcode3 = new QRCode("qrcodeThird", {width: 40, // 设置宽度height: 40, // 设置高度text: this.inviteLink,});},setQRCode() {this.$nextTick(function() {this.qrcode();});},

5.实现图片下载功能

实现图片下载功能是通过这位大佬的文章实现的，感谢大佬
https://blog.csdn.net/zhongguohaoshaonian/article/details/88891021

以下是代码：

1.遇到的问题：使用了这个方法后截取的图片顶部会出现白边，导致图片内容被往下挤，后来发现了问题，使用方法的时候需要加这一行代码：

window.scrollTo(0, 0);

clickGeneratePicture() {// 注意这一行代码window.scrollTo(0, 0);html2canvas(this.$refs.imageDom).then(canvas => {// 转成图片，生成图片地址this.imgUrl = canvas.toDataURL("../../assets/cs/png");// console.log(this.imgUrl);var eleLink = document.createElement("a");eleLink.href = this.imgUrl; // 转换后的图片地址eleLink.download = "推广海报1";// 触发点击document.body.appendChild(eleLink);eleLink.click();// 然后移除document.body.removeChild(eleLink);});}

6.功能实现过程

<Modalv-model="modal1"width="330"@on-ok="clickGeneratePicture()"@on-cancel="cancel":closable="false"><Carousel v-model="value1" v-if="modal1" :dots="setting.dots" @on-change="cos(value1)"><CarouselItem><div class="container" ref="imageDom"><img src="../../assets/img/Poster1.png" width="100%" height="100%" alt=""><div class="qrCode1" id="qrcodeFirst" ref="qrcode"></div></div></CarouselItem><CarouselItem>  <div class="container" ref="imageDom"><img src="../../assets/img/Poster2.png" width="100%" height="100%" alt=""><div class="qrCode2" id="qrcodeSecond" ref="qrcode"></div></div></CarouselItem><CarouselItem><div class="container" ref="imageDom"><img src="../../assets/img/Poster3.png" width="100%" height="100%" alt=""><div class="qrCode3" id="qrcodeThird" ref="qrcode"></div></div></CarouselItem></Carousel></Modal>

1.这里遇到的问题：当我点击确定进行下载背景图的时候发现下载下来的图片固定是第三张背景图，也就是说不论我如何切换背景图点击确定，下载下来的都是固定的一张图片，后来我发现原因是三个 div 的 ref 都是 “imageDom”，所以需要不同的命名，于是修改代码

这是修改后的js代码

<Modalv-model="modal1"width="330"@on-ok="clickGeneratePicture()"@on-cancel="cancel":closable="false"><Carousel v-model="value1" v-if="modal1" :dots="setting.dots" @on-change="cos(value1)"><CarouselItem><div class="container" ref="imageDomFirst"><img src="../../assets/img/Poster1.png" width="100%" height="100%" alt=""><div class="qrCode1" id="qrcodeFirst" ref="qrcode"></div></div></CarouselItem><CarouselItem>  <div class="container" ref="imageDomSecond"><img src="../../assets/img/Poster2.png" width="100%" height="100%" alt=""><div class="qrCode2" id="qrcodeSecond" ref="qrcode"></div></div></CarouselItem><CarouselItem><div class="container" ref="imageDomThird"><img src="../../assets/img/Poster3.png" width="100%" height="100%" alt=""><div class="qrCode3" id="qrcodeThird" ref="qrcode"></div></div></CarouselItem></Carousel></Modal>

2.新的问题来了，不同的背景图有不同的 ref ，那么就需要判断当我点击确定的时候当前的背景图是哪一张，这里 iview 的 Carousel组件为我们提供了相关的参数

详见https://www.iviewui.com/components/carousel

也就是说通过当前幻灯片的索引来判断，因为是从 0 开始，于是对js代码进行if判断

需要在 data 中进行初始化设置

data(){return{value1:0}
}

clickGeneratePicture() {window.scrollTo(0, 0);if(this.value1==0){html2canvas(this.$refs.imageDomFirst).then(canvas => {// backgroundColor: null;// 转成图片，生成图片地址this.imgUrl = canvas.toDataURL("../../assets/cs/png");// console.log(this.imgUrl);var eleLink = document.createElement("a");eleLink.href = this.imgUrl; // 转换后的图片地址eleLink.download = "推广海报1";// 触发点击document.body.appendChild(eleLink);eleLink.click();// 然后移除document.body.removeChild(eleLink);});}else if(this.value1 == 1){html2canvas(this.$refs.imageDomSecond).then(canvas => {// backgroundColor: null;// 转成图片，生成图片地址this.imgUrl = canvas.toDataURL("../../assets/cs/png");// console.log(this.imgUrl);var eleLink = document.createElement("a");eleLink.href = this.imgUrl; // 转换后的图片地址eleLink.download = "推广海报2";// 触发点击document.body.appendChild(eleLink);eleLink.click();// 然后移除document.body.removeChild(eleLink);});}else{html2canvas(this.$refs.imageDomThird).then(canvas => {// backgroundColor: null;// 转成图片，生成图片地址this.imgUrl = canvas.toDataURL("../../assets/cs/png");// console.log(this.imgUrl);var eleLink = document.createElement("a");eleLink.href = this.imgUrl; // 转换后的图片地址eleLink.download = "推广海报3";// 触发点击document.body.appendChild(eleLink);eleLink.click();// 然后移除document.body.removeChild(eleLink);});}},

本人前端小白，这是我自己在CSDN上写的第一篇文章，希望能对大家有帮助，文化水平不高，有点啰嗦还请见谅，有不正确的地方还请大家指正，非常感谢！