vue实现下载二维码

点击button按钮实现下载二维码

html 复制代码

<el-button
                    slot="reference"
                    size="mini"
                    style="margin-bottom: 10px; margin-left: 0"
                    type="success"
                    @click="handleDownload(scope.row)"
                    >下载二维码</el-button
                  >
                </div>

弹窗

html 复制代码

<el-dialog
      :title="下载二维码"
      :visible.sync="qrVisible"
      :close-on-click-modal="false"
      center
      width="800px"
    >
      <div class="qr-container">
        <div
          class="qr-section"
          v-if="currentRow.length > 0"
          :style="{textAlign: (currentRow.length === 1 ? 'center' : 'left')}"
        >
          <div class="qr-image" >
            <div id="qrCode"></div>
            <div class="qrCode-name">
              编号：{{
              currentRow[0].code + (currentRow.length < 2 ? '' : "-"+currentRow[0].number)
              }}
            </div>
          </div>
        </div>
        <div
          class="qr-section"
          v-if="currentRow.length > 1"
          :style="{textAlign: 'left'}"
        >
          <div class="qr-image">
            <div id="qrCode2"></div>
            <div class="qrCode-name">
              编号：{{currentRow[1].code + "-" + (currentRow[1].number ? currentRow[1].number : '') }}
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="downloadQrCode">下载</el-button>
        <el-button v-if="currentRow.length > 1" @click="downloadQrCode2">下载</el-button>
      </span>
    </el-dialog>

引入依赖

html 复制代码

import QRCode from "@keeex/qrcodejs-kx";
import html2canvas from "html2canvas";

html 复制代码

data(){
	return{
		currentRow: [{}],
		qrVisible: false,
	}
}

html 复制代码

 handleDownload(row) {
      //打开弹窗，并插入图片
      this.currentRow = row;
      this.qrVisible = true;
      //调用后端，也可以不调，目的是获取二维码下方的描述
      ListData(row.deviceId).then((res) => {
        if (res.retCode == 200) {
          this.currentRow = res.data;
          setTimeout(() => {
            document.getElementById("qrCode").innerHTML = "";
            new QRCode("qrCode", {
              width: 202,
              height: 202,
              text: res.data[0].mallUrl,
            });
            if (res.data.length > 1) {
              document.getElementById("qrCode2").innerHTML = "";
              new QRCode("qrCode2", {
                width: 202,
                height: 202,
                text: res.data[1].mallUrl,
              });
            }
          }, 200);
        }
      });
    },
    //下载图片
    downloadQrCode() {
      //不可以调整图片大小
      /*html2canvas(this.$refs.addImage, { useCORS: true }).then((canvas) => {
        // this.$refs.addImage.append(canvas);
        // debugger
        let link = document.createElement("a");
        link.href = canvas.toDataURL();
        link.setAttribute("download", this.currentRow.deviceCode + "-1.png");
        link.style.display = "none";
        document.body.appendChild(link);
        link.click();
      });*/
      this.downloadQrCodes("qrCode",
        this.currentRow[0].deviceCode +
        (this.currentRow.length < 2 ?  "" : "-"+this.currentRow[0].number) );

    },
    //下载图片
    downloadQrCode2() {
      //不可以调整图片大小
     /* html2canvas(this.$refs.addImage2, { useCORS: true }).then((canvas) => {
        // this.$refs.addImage.append(canvas);
        let link = document.createElement("a");
        link.href = canvas.toDataURL();
        link.setAttribute("download", this.currentRow.deviceCode + "-2.png");
        link.style.display = "none";
        document.body.appendChild(link);
        link.click();
      });*/
      this.downloadQrCodes("qrCode2",
        this.currentRow[1].deviceCode +"-"+
        (this.currentRow[1].number ? this.currentRow[1].number : "") );
    },
    downloadQrCodes(elementId, fileName) {
      //不包含文字
     /* const element = document.getElementById(elementId);
      html2canvas(element, { useCORS: true }).then((canvas) => {
        const scaledCanvas = document.createElement('canvas');
        scaledCanvas.width = 300;
        scaledCanvas.height = 300;
        const ctx = scaledCanvas.getContext('2d');
        ctx.drawImage(canvas, 0, 0, 300, 300);
        const link = document.createElement("a");
        link.download = fileName;
        link.href = scaledCanvas.toDataURL("image/png");
        link.click();
      });*/

      // 包含文字
      const element = document.getElementById(elementId);
      html2canvas(element, { useCORS: true }).then((canvas) => {
        const canvasSize = 400; // 设置画布尺寸为正方形
        const scaledCanvas = document.createElement('canvas');
        scaledCanvas.width = canvasSize;
        scaledCanvas.height = canvasSize;

        const ctx = scaledCanvas.getContext('2d');

        // 绘制白色背景
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, canvasSize, canvasSize);

        // 绘制缩放后的图片并居中
        const imageWidth = 300; // 设置二维码图片宽度
        const x = (canvasSize - imageWidth) / 2;
        const y = 50; // 显示在画布中的垂直位置
        ctx.drawImage(canvas, x, y, imageWidth, imageWidth); // 图像居中，从顶部向下50像素处开始

        // 获取编号文字样式
        const numberStyle = window.getComputedStyle(document.querySelector('.qrCode-name'));
        const fontSize = numberStyle.getPropertyValue('font-size');
        const fontColor = numberStyle.getPropertyValue('color');
        const fontWeight = numberStyle.getPropertyValue('font-weight');

        // 将获取到的样式应用到绘制编号的文字上
        ctx.font = `${fontWeight} ${fontSize} Arial`;
        ctx.fillStyle = fontColor;

        // 绘制编号文字
        const text = "设备编号: " + fileName;
        const textX = canvasSize / 2;
        const textY = canvasSize - 20; // 设置位置为画布中心底部，向上偏移20像素
        ctx.textAlign = "center";
        ctx.fillText(text, textX, textY);

        const link = document.createElement("a");
        //文件名
        link.download = fileName + ".png";
        link.href = scaledCanvas.toDataURL("image/png");
        link.click();
      });
    },