Vue3如何更好地使用qrcodejs生成二维码并添加文字描述？下面本篇文章给大家介绍一下Vue3+qrcodejs生成二维码并添加文字描述，希望对大家有所帮助。

最近项目中有生成二维码功能的需求，还需要在二维码底部添加文字描述，并把二维码和文字合并成一张图下载的要求。

之前的项目有用到vue-qr，确实非常好用，但是考虑到添加文字描述，后面就选择了qrcodejs。（学习视频分享：vue视频教程）

文章项目基于 《使用Vite搭建Vue3项目实践记录 》

https://juejin.cn/post/7082307153192550430

生成二维码

安装qrcodejs,并安装其类型定义模块

npm i qrcode -S npm install --save @types/qrcode

新建全局二维码组件QRcode.vue，二维码信息及文字描述都由外部传入

基本操作就是先调用qrcode的toDataURL方法，获取到二维码的Base64图片信息，随后新建Image，再把图片画到Canvas里

最后加上自定义文字即可

需要注意的是文字的位置是在图片底部居中

qrCodeOption为qrcode相关配置，详情qrcode – npm (npmjs.com)

<template>   <canvas id="canvas" ref="canvas" :width="width" :height="height"></canvas> </template>  <script setup> import QRCode from "qrcode"; import { onMounted, ref } from "vue";  const props = defineProps({   //二维码存储内容   qrUrl: {     type: String,     default: "Hello World"   },   // canvas width   width: {     type: Number,     default: 400   },   // canvas height   height: {     type: Number,     default: 400   },   // 二维码尺寸（正方形 长宽相同）   qrSize: {     type: Number,     default: 360   },   // 二维码底部文字   qrText: {     type: String,     default: "Hello World"   },   //底部说明文字字号   qrTextSize: {     type: Number,     default: 24   } });  const qrCodeOption = {   errorCorrectionLevel: "H",   width: props.qrSize,   version: 7 };  const canvas = ref<HTMLCanvasElement>(); /**  * @argument qrUrl        二维码内容  * @argument qrSize       二维码大小  * @argument qrText       二维码中间显示文字  * @argument qrTextSize   二维码中间显示文字大小(默认16px)  */ const handleQrcode = () => {   let dom = canvas.value as HTMLCanvasElement;   QRCode.toDataURL(props.qrUrl, qrCodeOption)     .then((url: string) => {       // 画二维码里的logo// 在canvas里进行拼接       const ctx = dom.getContext("2d") as CanvasRenderingContext2D;       const image = new Image();       image.src = url;       setTimeout(() => {         ctx.drawImage(image, (props.width - props.qrSize) / 2, 0, props.qrSize, props.qrSize);         if (props.qrText) {           //设置字体           ctx.font = "bold " + props.qrTextSize + "px Arial";           let tw = ctx.measureText(props.qrText).width; // 文字真实宽度           let ftop = props.qrSize - props.qrTextSize; // 根据字体大小计算文字top           let fleft = (props.width - tw) / 2; // 根据字体大小计算文字left           ctx.fillStyle = "#fff";           ctx.textBaseline = "top"; //设置绘制文本时的文本基线。           ctx.fillStyle = "#333";           ctx.fillText(props.qrText, fleft, ftop);         }       }, 0);     })     .catch((err: Error) => {       console.error(err);     }); };  onMounted(() => {   handleQrcode(); }); </script>  <style scoped></style>

思考和优化setTimeout改为Promise

到这里二维码的功能基本可以使用了，但是我在想为什么这里需要使用到setTimeout呢？

如果是nextTick行不行？答案是不行的，原因是nextTick是微任务，实在DOM刷新之前就执行了，而setTimeout在之后执行。

可以注意到代码中有新建Image方法，图片加载是异步的，所以有更好的处理方法吗？

可以改用Promise，在图片的onload方法中返回图片就可以了，所以改写下handleQrcode

const handleQrcode = () => {   let dom = canvas.value as HTMLCanvasElement;   QRCode.toDataURL(props.qrUrl, qrCodeOption)     .then((url: string) => {       // 画二维码里的logo// 在canvas里进行拼接       const ctx = dom.getContext("2d") as CanvasRenderingContext2D;       const image = new Image();       image.src = url;       new Promise<HTMLImageElement>((resolve) => {         image.onload = () => {           resolve(image);         };       }).then((img: HTMLImageElement) => {         // console.log(img, ctx)         ctx.drawImage(img, (props.width - props.qrSize) / 2, 0, props.qrSize, props.qrSize);         if (props.qrText) {           //设置字体           ctx.font = "bold " + props.qrTextSize + "px Arial";           let tw = ctx.measureText(props.qrText).width; // 文字真实宽度           let ftop = props.qrSize - props.qrTextSize; // 根据字体大小计算文字top           let fleft = (props.width - tw) / 2; // 根据字体大小计算文字left           ctx.fillStyle = "#fff";           ctx.textBaseline = "top"; //设置绘制文本时的文本基线。           ctx.fillStyle = "#333";           ctx.fillText(props.qrText, fleft, ftop);         }       });     })     .catch((err: Error) => {       console.error(err);     }); };

二维码下载

有了二维码就需要下载，补充下载方法，在组件内部加

直接使用canvas toDataURL方法转成Base64

//保存图片 const savePic = () => {   let dom = canvas.value as HTMLCanvasElement;   let a = document.createElement("a");   //将二维码面板处理为图片   a.href = dom.toDataURL("image/png", 0.5);   a.download = props.qrUrl + ".png";   a.click(); };  defineExpose({ savePic });

父组件调用

全局注册

可以把组件注册为全局组件，可以参考文章Vue项目中的实用技巧记录

其中包括webpack和vite遍历vue文件注册全局组件

调用组件

<template>   <div class="container">     <QRcode />   </div> </template>

效果如图

多二维码遍历下载

上面补充的下载方法中，需要使用defineExpose，不然会调用不到子组件方法

<template>   <div>     <QRcode v-for="item in qrcodeList" ref="qrcode" :key="item.id" :qr-url="item.label" :qr-text="item.label" />     <el-button @click="downloadAll">downlaod</el-button>   </div> </template>  <script setup> import { reactive, ref } from "vue"; const qrcode = ref(); const qrcodeList = reactive([   { id: 1, label: "山卡拉OK" },   { id: 2, label: "伍六七" },   { id: 3, label: "梅小姐" },   { id: 4, label: "鸡大保" },   { id: 5, label: "小飞鸡" } ]);  const downloadAll = () => {   qrcode.value.map((item: any) => {     item.savePic();   }); }; </script>

Option Api案例

Option Api的案例如下

src/components/QRcodeOption.vue · LWH/vite-vue3-project – 码云 – 开源中国 (gitee.com)

src/views/qrcode/qrcode2.vue · LWH/vite-vue3-project – 码云 – 开源中国 (gitee.com)

（学习视频分享：web前端开发、编程基础视频）