记录使用vue-qr生成二维码的过程。
本文主要实现两个功能：
- 输入不同的地址，生成不同的二维码；生成带logo的二维码；生成随机颜色的二维码；下载二维码。
- 选择表格对应数据，生成二维码并打印，一页纸仅打印一个二维码。
- 安装
// npm
npm install vue-qr --save
// yarn
yarn add vue-qr- 引入
// vue2.x
import VueQr from 'vue-qr'
// vue3.x
import vueQr from 'vue-qr/src/packages/vue-qr.vue'- 功能一：生成二维码
<template>
<div class="dynamic-qrCode-container">
<div class="dynamic-operate">
<el-input
class="common-input input-qrCode"
v-model="text"
></el-input>
<el-button type="primary" class="common-button" @click="handleQrCode(1)">生成普通二维码</el-button>
<el-button type="primary" class="common-button" @click="handleQrCode(2)">生成带logo二维码</el-button>
<el-button type="primary" class="common-button" @click="handleQrCode(3)">生成随机颜色二维码</el-button>
<el-button type="primary" class="common-button" @click="handleQrCode(4)">下载二维码</el-button>
</div>
<vue-qr
ref="qrCode"
:text="text"
:logoSrc="logoSrc"
:color-dark="randomColor"
:callback="qrCodeCallback"
width="100"
height="100"
></vue-qr>
</div>
</template>参数说明：
- text
二维码的内容，即扫出来的结果。
- logoSrc
嵌入二维码中心的logo图片地址。
- color-dark
实点的颜色，即有色部分。修改该值可改变实点的颜色，即二维码整体展示的颜色。
- callback
生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)
import VueQr from 'vue-qr'
import logo from '@/assets/image/logo.png'
import { getColor } from '@/utils/index.js'
export default {
name: 'dynamicQrCode',
components:{
VueQr,
},
data(){
return{
text: 'https://zhuanlan.zhihu.com/p/427065468',
logoSrc: '',
randomColor: 'black',
qrCodeUrl: '', // 存放生成的二维码url
}
},
methods:{
qrCodeCallback(url){
this.qrCodeUrl = url
},
handleQrCode(type){
switch (type){
case 1:
this.randomColor = 'black'
this.logoSrc = ''
break
case 2:
this.logoSrc = logo
break
case 3:
this.randomColor = getColor()
break
case 4:
let name = new Date().getTime();
let a = document.createElement("a");
a.style.display = "none";
a.download = name;
a.href = this.qrCodeUrl;
document.body.appendChild(a);
a.click();
a.remove()
break
}
},
}
}
生成随机颜色
// 生成随机颜色
export function getColor() {
var str = '#'
var arr = ['1', '2', '3', '4', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
for (var i = 0; i < 6; i++) {
var num = parseInt(Math.random() * 16)
str += arr[num]
}
return str
}- 效果图
- 功能二：打印二维码
该功能需要用到vue-print-nb打印插件，需先安装插件。该插件的安装及使用可以看一下这篇文章（插入链接）。
实现勾选表格的数据，用表格的selection-change事件，当勾选的数据发生变化时，实时获取到已勾选的数据。
<div class="print-qrCode-container">
<div class="button-operate">
<el-button
:type="buttonType"
class="common-button plain-button"
@click="handleLogo"
:class="showLogo ? 'success-button': ''"
>
<i class="iconfont com-icon icon-check-empty"></i>
<span>带logo</span>
</el-button>
<el-button type="primary" class="common-button" v-print="'#printQrCode'">
<i class="iconfont com-icon icon-printer"></i>
<span>打印二维码</span>
</el-button>
</div>
<div class="url-container">
<el-table
:data="tableData"
height="calc(100vh - 280px)"
border
@selection-change="onChange"
<el-table-column type="selection" align="center" width="55">
</el-table-column>
<el-table-column label="文章编号" prop="order"></el-table-column>
<el-table-column label="文章描述" prop="decs"></el-table-column>
<el-table-column label="分栏类型" prop="programSort"></el-table-column>
<el-table-column label="创作类型" prop="produceSort"></el-table-column>
<el-table-column label="可见范围" prop="visibleRange"></el-table-column>
<el-table-column label="文章热度" prop="hot" width="100"></el-table-column>
</el-table>
</div>
</div>存放已勾选的数据生成的二维码
<div class="qrCode-container">
<div id="printQrCode">
<div
v-for="item in printQrCode"
class="qrCode-content"
>
<vue-qr
ref="qrCode"
:text="item.url"
:logoSrc="showLogo ? item.logo : ''"
size="400"
></vue-qr>
</div>
</div>
</div>这里不希望在页面上显示已生成的二维码
.qrCode-container{
width: 0;
height: 0;
overflow: hidden;
}在打印时希望，一张纸只打印一个二维码，使用样式page-break-after: always
.qrCode-content{
margin-top: 200px;
margin-left: 160px;
page-break-after:always
}- 打印二维码不带logo的效果图
（图片违规了，马赛克之后的效果图）
- 打印二维码带logo的效果图
（图片违规了，马赛克之后的效果图）