【Vue】二维码生成

 

按组长提供的样例，功能比较相符合的是这个博客：

https://www.jianshu.com/p/8d59107e1992

这个博客引用的是这篇文章：

https://blog.csdn.net/wwqqqq123/article/details/90261994

　

如何使用和参数说明很清楚，这里我就直接贴我写的DEMO

东西还没要求要弄上去，但是我自己先弄出来，怕后面需求变动又说需要了

 

首先主界面会放一个对话框：

    <el-dialog
      v-if="qrCodeVisible"
      title="二维码生成"
      :append-to-body="true"
      :visible.sync="qrCodeVisible"
      width="450px"
      class="roll-dialog"
    >
      <qr-code-page :rooms="changedList" />
    </el-dialog>

会传递选中的房间列表数据

 

二维码对话框页面：

logo随便引用一个小图标

大小200像素

text属性就是存储的参数，因为不确定传什么，先放上场所编号和房间号

因为是房间列表，所以传递若干个房间，用div包裹组件再遍历

<template>
  <div>

    <div
      class="qrCode-border"
      v-for="(room, idx) in rooms"
      :key="idx"
      align="center"
    >
      <h3>房号：{{room.roomNo}}</h3>
      <vue-qr
        :logo-src="logoSrc"
        :size="200"
        :auto-color="true"
        :dot-scale="1"
        :text="room.placeCode + '-' + room.roomNo"
      />
    </div>

  </div>
</template>

<script>

import VueQr from 'vue-qr'
export default {
  name: 'QrCodePage',
  components: {
    VueQr
  },
  props: {
    rooms: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      logoSrc: '/favicon.ico'
    }
  }
}
</script>

<style scoped>
  .qrCode-border {
    margin: 20px 0px;
  }
</style>

　　

解决对话框过长的问题，设置对话框的滚动条

https://blog.csdn.net/qq_32837111/article/details/121248211

　　

效果：

 

 

在确定这个功能之后，发现是一个小程序的二维码生成

则这样vue-qr组件没啥用了，二维码的生成是在后台完成的

拿到微信接口的Token之后再请求二维码接口获取图片

    /**
     * 获取小程序码,数量暂无限制
     */
    public final static String APPLET_QRCORE_UNLIMIT = "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN";

    /**
     * 获取小程序码,数量限制
     */
    public final static String APPLET_QRCORE_GET = "https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN";

    /**
     * 封装小程序二维码相关信息 
     *
     * @param placeCode     场所编号
     * @param roomNo        房间号
     * @param dataMap       返回结果map信息
     * @param redisTemplate redis工具类
     * @return
     * @author wangkun
     * @createTime 2022/3/14 16:15
     */
    public final static void packageAppletQrcodeInfo(String placeCode, String roomNo, Map<String, Object> dataMap, RedisTemplate<String, Object> redisTemplate) {
        //step1 获取小程序token信息
        String accessToken = redisTemplate.opsForValue().get(ApiConstants.CACHE_KEY_AISW_WX_APPLET_TOKEN_PREFIX).toString();
        String requestUrl = APPLET_QRCORE_GET.replace("ACCESS_TOKEN", accessToken);
        //封装小程序二维码参数值
        JSONObject paramJson = new JSONObject();
        paramJson.put("width", "280");
        StringBuffer sceneData = new StringBuffer();
        //sceneData.append(placeCode).append("##").append(roomNo);
        sceneData.append("pages/index/index").append("?c=").append(placeCode).append("&r=").append(roomNo);
        paramJson.put("path", sceneData.toString());
        RSClient rsClient = new RSClient(requestUrl);
        AppletDataQueryApi qrCodeQueryApi = rsClient.createObject(AppletDataQueryApi.class, 60000, 60000);
        byte[] qrCodeByte = qrCodeQueryApi.sendQrcodeData(paramJson.toString());
        if (!ChkUtil.isEmpty(qrCodeByte)) {
            String qrCodeBaseImg64 = "data:image/png;base64," + Base64.getEncoder().encodeToString(qrCodeByte).replaceAll("\r\n", "");
            dataMap.put("imagBase", qrCodeBaseImg64);
        }
    }

　

 接口响应结果：

 

 

 

 返回Base64图片编码，直接传给img的src属性上面

前端接口获取数据：

  created() {
    this.getRoomQrcodePics()
  },
  methods: {
    async getRoomQrcodePics() {
      const rooms = this.rooms.map(room => room.roomNo).toString()
      const { data: res } = await getRoomQrCodes({
        placeCode: this.rooms[0].placeCode,
        rooms: rooms
      })
      console.log(res)
      this.qrCodeInfoList = res
      this.loadingFlag = false
    },
　}

标签渲染：

    <div v-if="!loadingFlag" ref="qrCodeZone" class="container">
      <div
        v-for="(qrCode, idx) in qrCodeInfoList"
        :key="idx"
        class="qrCode-border"
        align="center"
      >
        <!--<img :src="qrCode.imagBase">-->
        <!--<img src="./../../../assets/images/test-qrCode.png" alt="">-->
        <div class="qrCode-info">
          <img :src="qrCode.imagBase">
          <div class="room">房间号：{{ qrCode.roomNo }}</div>
          <div class="placeName">{{ qrCode.placeName }}</div>
        </div>
      </div>
    </div>

 

设置样式渲染，因为这个二维码需要被打印出来贴在房间里面直接用：

所以对div元素嵌套了一个背景图，然后再把二维码摆在上面

  .qrCode-border {
    width: 500px;
    height: 1000px;
    margin: 10px 0px;
    background-image: url('./../../../assets/images/qrCode-bg.png');
    background-size: 100%;
    position: relative;
    float: left;
    border-radius: 15px;
  }
  .qrCode-border:nth-child(odd) {
    margin-right: 20px;
  }
  .qrCode-info {
    position: absolute;
    left: 50%;
    top: 21%;
    transform: translate(-50%, -21%);
    height: 285px;
  }
  .qrCode-info .room {
    font-size: 30px;
    font-weight: bolder;
    color: black;
    margin: 5px;
  }
  .qrCode-info .placeName {
    font-size: 20px;
    font-weight: bolder;
    color: black;
  }

　　

上面只能让二维码直接浏览，为了方便用户打印，还需要让预览界面生成图片下载下来

这里参考了两篇博客来实现：

把元素转换成图片参考博客
https://blog.csdn.net/Mr__proto__/article/details/124481187
https://www.jianshu.com/p/eb963fc867b8

抓取选中的元素，然后转成BASE64编码来下载

生成逻辑和下载逻辑：

    spawnPicture() {
      html2canvas(this.$refs.qrCodeZone).then((canvas) => {
        const dataURL = canvas.toDataURL('image/png')

        //  这里是转换成base64格式的
        this.picData = dataURL
        console.log(dataURL)

        // 生成下载资源
        const link = document.createElement('a')

        // 去掉此标签的所有样式避免展示出a标签
        link.style.display = 'none'

        // 把获取到的流文件放到href属性里
        link.href = dataURL

        // 调用download属性，并添加名字
        link.setAttribute('download', '二维码.png')

        // 添加这个a标签到body上
        document.body.appendChild(link)

        // 触发click事件
        link.click()
      })
    }