vue 生成二维码并可以下载带有边框背景颜色的二维码

最新推荐文章于 2023-12-25 17:57:26 发布

Making_Bug

最新推荐文章于 2023-12-25 17:57:26 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.csdn.net/Making_Bug/article/details/105806537

版权

本文介绍如何在Vue项目中生成一个可下载的二维码，并且这个二维码带有边框和背景颜色，以提高二维码的可识度。

摘要由CSDN通过智能技术生成

项目需求：需要生成一个可以下载且带有边框背景的二维码

如果只用qrcode.js只能实现下载二维码，但是下载下来的二维码没有边框背景，可识度非常低，所以需要给下载的二维码加个边框，白色灰色之类的

首先下载要使用的插件

npm/cnpm install qrcodejs2 --save

npm/cnpm install html2canvas --save

引入插件

import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'

html代码：

<!-- 控制对话框显示隐藏 -->
<el-button type="primary" icon="el-icon-s-grid" @click="show_qrcode(scope.row.name, scope.row.portalUrl)" style="margin-left: 0;" :disabled="scope.row.staticQrcodeAuth == 'disable'"></el-button>
//我将二维码放在了一个dialog里，这里自行定义
<el-dialog
  	width="30%"
   :before-close="handleClose"
   :show-close="false"
   :center="true"
   :title