Record the process of using vue-qr to generate QR codes.
Refer to the article Using vue-qr to generate beautiful QR codes in vue
Refer to the article using qrcode to generate QR codes and implement printing functions in vue
This article mainly implements two functions:
- Enter different addresses to generate different QR codes; generate QR codes with logos; generate QR codes with random colors; download QR codes.
- Select the data corresponding to the table, generate a QR code and print it. Only one QR code is printed on one page.
- Install
// npm
npm install vue-qr --save
// yarn
yarn add vue-qr- introduce
// vue2.x
import VueQr from 'vue-qr'
// vue3.x
import vueQr from 'vue-qr/src/packages/vue-qr.vue'- Function 1: Generate QR code
<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>Parameter Description:
- text
The content of the QR code is the scanned result.
- logoSrc
Embed the logo image address in the center of the QR code.
- color-dark
The color of the solid point, that is, the colored part. Modifying this value can change the color of the solid point, that is, the color of the overall display of the QR code.
- callback
The generated QR code Data URI can be obtained in the callback. The first parameter is the QR code data URL, and the second parameter is the qid passed by props (because the QR code generation is asynchronous, so add an id for sort)
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
}
},
}
}
Generate random colors
// 生成随机颜色
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
}- renderings
- Function 2: Print QR code
This function requires the vue-print-nb printing plug-in, which needs to be installed first. For the installation and use of this plug-in, please read this article (insert link).
To realize the data of the checked table, use the selection-change event of the table. When the checked data changes, the checked data can be obtained in real time.
<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>Store the QR code generated by the selected data
<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>I do not want the generated QR code to be displayed on the page.
.qrCode-container{
width: 0;
height: 0;
overflow: hidden;
}When printing, if you want to print only one QR code on a piece of paper, use the style page-break-after: always
.qrCode-content{
margin-top: 200px;
margin-left: 160px;
page-break-after:always
}- Print the rendering of QR code without logo
(The picture violates the rules, the rendering after mosaic)
- Printing QR code with logo renderings
(The picture violates the rules, the rendering after mosaic)