本文主要是介绍若依前端分离版中使用二维码功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、安装
在前端项目工程目录，远端执行如下命令
// npm
npm install vue-qr --save
// yarn
yarn add vue-qr
二、引入组件
在main.js文件中增加如下的内容
// vue2.x
import VueQr from 'vue-qr'
//注册组件
Vue.component('VueQr', VueQr)// vue3.x
import vueQr from 'vue-qr/src/packages/vue-qr.vue'三、使用方法
功能一：生成二维码
<template><div class="dynamic-qrCode-container"><div class="dynamic-operate"><el-inputclass="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-qrref="qrCode":text="text":logoSrc="logoSrc":color-dark="randomColor":callback="qrCodeCallback"width="100"height="100"></vue-qr></div>
</template> <el-table-column label="条码格式" align="center"><template slot-scope="scope"><vue-qr ref="qrCode" :text="mytext" width="100" height="100"></vue-qr></template></el-table-column>
参数说明：
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 = ''breakcase 2:this.logoSrc = logobreakcase 3:this.randomColor = getColor()breakcase 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>onChange事件，勾选行，赋值给printQrCode
onChange(val){this.printQrCode = val},
存放已勾选的数据生成的二维码
<div class="qrCode-container"><div id="printQrCode"><divv-for="item in printQrCode"class="qrCode-content"><vue-qrref="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的效果图
前端(若依-vue2版本)实现生成二维码，并提供下载功能_若依 微信小程序二维码-CSDN博客
<template><div class="app-container"><el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="条码类型" prop="barcodeType"><el-select v-model="queryParams.barcodeType" placeholder="请选择条码类型"><el-option v-for="dict in dict.type.mes_barcode_type" :key="dict.value" :label="dict.label":value="dict.value"></el-option></el-select></el-form-item><el-form-item label="业务编码" prop="bussinessCode"><el-input v-model="queryParams.bussinessCode" placeholder="请输入业务编码" clearable @keyup.enter.native="handleQuery" /></el-form-item><el-form-item label="业务名称" prop="bussinessName"><el-input v-model="queryParams.bussinessName" placeholder="请输入业务名称" clearable @keyup.enter.native="handleQuery" /></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button></el-form-item></el-form><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"v-hasPermi="['mes:wm:barcode:add']">新增</el-button></el-col><el-col :span="1.5"><el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"v-hasPermi="['mes:wm:barcode:remove']">删除</el-button></el-col><el-col :span="1.5"><el-button type="success" icon="el-icon-s-tools" size="mini" @click="handleConfig"v-hasPermi="['mes:wm:barcode:edit']">条码设置</el-button></el-col><el-col :span="1.5"><el-button type="primary" icon="el-icon-printer" size="mini" @click="handleBatchPrint"v-hasPermi="['mes:wm:barcode:view']">批量打印</el-button></el-col><Barcodeconfig ref="barcodeconfig"></Barcodeconfig><BarcodeBatchPrint ref="barcodebatchprint"></BarcodeBatchPrint><right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar></el-row><el-table v-loading="loading" :data="barcodeList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="条码" align="center"><template slot-scope="scope"><el-image @click="handleView(scope.row)" class="barcodeClass" fit="scale-down" :src="scope.row.barcodeUrl"><div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div></el-image></template></el-table-column><el-table-column label="条码格式" align="center"><template slot-scope="scope"><vue-qr ref="qrCode" :text="mytext" width="100" height="100"></vue-qr></template></el-table-column><el-table-column label="条码格式" align="center"><template slot-scope="scope"><el-button size="mini" type="text" @click="onItemClick(scope.row)">打开二维码</el-button></template></el-table-column><el-table-column label="条码格式" align="center" prop="barcodeFormart"><template slot-scope="scope"><dict-tag :options="dict.type.mes_barcode_formart" :value="scope.row.barcodeFormart" /></template></el-table-column><el-table-column label="条码类型" align="center" prop="barcodeType"><template slot-scope="scope"><dict-tag :options="dict.type.mes_barcode_type" :value="scope.row.barcodeType" /></template></el-table-column><el-table-column label="条码内容" align="center" prop="barcodeContent" /><el-table-column label="业务编码" align="center" prop="bussinessCode" /><el-table-column label="业务名称" align="center" prop="bussinessName" /><el-table-column label="是否生效" align="center" prop="enableFlag"><template slot-scope="scope"><dict-tag :options="dict.type.sys_yes_no" :value="scope.row.enableFlag" /></template></el-table-column><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template slot-scope="scope"><el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"v-hasPermi="['mes:wm:barcode:edit']">编辑</el-button><el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"v-hasPermi="['mes:wm:barcode:remove']">删除</el-button></template></el-table-column></el-table><pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"@pagination="getList" /><!-- 添加或修改条码清单对话框 --><el-dialog :title="title" :visible.sync="open" width="960px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="100px"><el-row><el-col :span="8"><el-form-item label="条码格式" prop="barcodeFormart"><el-select v-model="form.barcodeFormart" placeholder="请选择条码格式"><el-option v-for="dict in dict.type.mes_barcode_formart" :key="dict.value" :label="dict.label":value="dict.value"></el-option></el-select></el-form-item></el-col><el-col :span="8"><el-form-item label="条码类型" prop="barcodeType"><el-select v-model="form.barcodeType" placeholder="请选择条码类型"><el-option v-for="dict in dict.type.mes_barcode_type" :key="dict.value" :label="dict.label":value="dict.value"></el-option></el-select></el-form-item></el-col><el-col :span="8"><el-form-item label="是否启用"><el-radio-group v-model="form.enableFlag" disabled v-if="optType == 'view'"><el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label}}</el-radio></el-radio-group><el-radio-group v-model="form.enableFlag" v-else><el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label}}</el-radio></el-radio-group></el-form-item></el-col></el-row><!--根据不同的条码类型展示不同的业务内容选择 start--><!--物料产品--><el-row v-if="form.barcodeType == 'ITEM'"><el-col :span="12"><el-form-item label="物料编码" prop="bussinessCode"><el-input v-model="form.bussinessCode" readonly="readonly" placeholder="请选择物料编码"><el-button slot="append" @click="handleSelectProduct" icon="el-icon-search"></el-button></el-input></el-form-item><ItemSelect ref="itemSelect" @onSelected="onItemSelected"> </ItemSelect></el-col><el-col :span="12"><el-form-item label="物料名称" prop="bussinessName"><el-input v-model="form.bussinessName" readonly="readonly" /></el-form-item></el-col></el-row><!--仓库--><el-row v-if="form.barcodeType == 'WAREHOUSE'"><el-col :span="24"><el-form-item label="储位" prop="warehouseId"><!-- <el-cascader v-model="warehouseInfo":options="warehouseOptions":props="warehouseProps"@change="handleWarehouseChanged"> </el-cascader> --><el-cascader v-model="warehouseInfo" ref="warehouseRef" :options="warehouseOptions" :props="warehouseProps"@change="handleWarehouseChanged"></el-cascader></el-form-item></el-col></el-row><!--箱条码--><el-row v-if="form.barcodeType == 'BOX'"><el-col :span="12"><el-form-item label="装箱单号" prop="packageCode"><el-input v-model="form.bussinessCode" readonly="readonly" placeholder="请选择装箱单"><el-button slot="append" @click="handleSelectPackage" icon="el-icon-search"></el-button></el-input></el-form-item><PackageSelectSingle ref="packageSelect" :status="'FINISHED'" @onSelected="onPackageSelected"></PackageSelectSingle></el-col><el-col :span="12"><el-form-item label="客户名称" prop="bussinessName"><el-input v-model="form.bussinessName" readonly="readonly" /></el-form-item></el-col></el-row><!--供应商--><el-row v-else-if="form.barcodeType == 'VENDOR'"><el-col :span="12"><el-form-item label="供应商编号" prop="bussinessCode"><el-input v-model="form.bussinessCode" readonly="readonly" placeholder="请选择供应商"><el-button slot="append" @click="handleSelectVendor" icon="el-icon-search"></el-button></el-input><VendorSelect ref="vendorSelect" @onSelected="onVendorSelected" /></el-form-item></el-col><el-col :span="12"><el-form-item label="供应商名称" prop="bussinessName"><el-input v-model="form.bussinessName" readonly="readonly"></el-input></el-form-item></el-col></el-row><!-- 工作站 --><el-row v-else-if="form.barcodeType == 'WORKSTATION'"><el-col :span="12"><el-form-item label="工作站" prop="bussinessCode"><el-input v-model="form.bussinessCode" placeholder="请选择工作站"><el-button slot="append" icon="el-icon-search" @click="handleWorkstationSelect"></el-button></el-input></el-form-item><WorkstationSelect ref="wsSelect" @onSelected="onWorkstationSelected"> </WorkstationSelect></el-col><el-col :span="12"><el-form-item label="工作站名称" prop="bussinessName"><el-input v-model="form.bussinessName" readonly="readonly"></el-input></el-form-item></el-col></el-row><!-- 库存 --><el-row v-else-if="form.barcodeType == 'STOCK'"><el-col :span="8"><el-form-item label="物资编码" prop="bussinessCode"><el-input v-model="form.bussinessCode" placeholder="请选择库存记录"><el-button slot="append" icon="el-icon-search" @click="handleMaterialStockSelect"></el-button></el-input></el-form-item><StockSelect ref="stockSelect" @onSelected="onMaterialStockSelected"> </StockSelect></el-col><el-col :span="16"><el-form-item label="物资信息" prop="bussinessName"><el-input v-model="form.bussinessName" readonly="readonly"></el-input></el-form-item></el-col></el-row><!--根据不同的条码类型展示不同的业务内容选择 end--><el-row><el-col :span="24"><el-form-item label="条码内容"><el-input v-model="form.barcodeContent" /></el-form-item></el-col></el-row><el-row><el-col :span="24"><el-form-item label="条码" prop="url"><el-image class="barcodeFormClass" :src="form.barcodeUrl"><div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div></el-image></el-form-item></el-col></el-row><el-row><el-col :span="24"><el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /></el-form-item></el-col></el-row></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="cancel" v-if="optType == 'view'">返回</el-button><el-button type="primary" @click="submitForm" v-if="optType != 'view'">保 存</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog><!-- 二维码弹窗 --><el-dialog :title="title" :visible.sync="show" width="500px" append-to-body><div style="justify-content: center;align-items: center;display: flex;" ><vue-qr ref="qrCode" :text="mytext" width="100" height="100"></vue-qr></div><div slot="footer" class="dialog-footer"><el-button type="primary" >下 载</el-button><el-button >取 消</el-button></div></el-dialog></div>
</template><script>
import { listBarcode, getBarcode, delBarcode, addBarcode, updateBarcode } from "@/api/mes/wm/barcode";
import ItemSelect from "@/components/itemSelect/single.vue";
import VendorSelect from "@/components/vendorSelect/single.vue";
import PackageSelectSingle from "@/components/package/single.vue";
import WorkstationSelect from "@/components/workstationSelect/simpletableSingle.vue"
import StockSelect from "@/components/stockSelect/single.vue"
import Barcodeconfig from "./config.vue"
import BarcodeBatchPrint from "./batchprint.vue"
import { getTreeList } from "@/api/mes/wm/warehouse"import VueQr from 'vue-qr'export default {name: "Barcode",dicts: ['mes_barcode_type', 'mes_barcode_formart', 'sys_yes_no'],components: {ItemSelect, VendorSelect, PackageSelectSingle, Barcodeconfig, WorkstationSelect, StockSelect, BarcodeBatchPrint},data() {return {warehouseInfo: [],warehouseOptions: [],warehouseProps: {multiple: false,value: 'pId',label: 'pName',},optType: null,// 遮罩层loading: true,// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 显示搜索条件showSearch: true,// 总条数total: 0,// 条码清单表格数据barcodeList: [],// 弹出层标题title: "",// 是否显示弹出层open: false,mytext: "123",show:false,// 查询参数queryParams: {pageNum: 1,pageSize: 10,barcodeFormart: null,barcodeType: null,barcodeContent: null,bussinessId: null,bussinessCode: null,bussinessName: null,barcodeUrl: null,enableFlag: null},// 表单参数form: {},// 表单校验rules: {barcodeFormart: [{ required: true, message: "条码格式不能为空", trigger: "blur" }],barcodeType: [{ required: true, message: "条码类型不能为空", trigger: "change" }],barcodeContent: [{ required: true, message: "产品物料ID不能为空", trigger: "blur" }],}};},created() {this.getList();this.getWarehouseList();},methods: {/** 查询条码清单列表 */getList() {this.loading = true;listBarcode(this.queryParams).then(response => {this.barcodeList = response.rows;this.total = response.total;this.loading = false;});},// 取消按钮cancel() {this.open = false;this.reset();},// 表单重置reset() {this.form = {barcodeId: null,barcodeFormart: null,barcodeType: null,barcodeContent: null,bussinessId: null,bussinessCode: null,bussinessName: null,barcodeUrl: null,enableFlag: 'Y',remark: null,attr1: null,attr2: null,attr3: null,attr4: null,createBy: null,createTime: null,updateBy: null,updateTime: null};this.resetForm("form");},//生成二维码onItemClick(row) {console.log(row);this.show = true;this.title = '二维码';this.mytext=row.barcodeContent;},/** 搜索按钮操作 */handleQuery() {this.queryParams.pageNum = 1;this.getList();},/** 重置按钮操作 */resetQuery() {this.resetForm("queryForm");this.handleQuery();},// 多选框选中数据handleSelectionChange(selection) {this.ids = selection.map(item => item.barcodeId)this.single = selection.length !== 1this.multiple = !selection.length},/** 新增按钮操作 */handleAdd() {this.reset();this.open = true;this.title = "添加条码";this.optType = "add";},handleView(row) {this.reset();const barcodeId = row.barcodeIdgetBarcode(barcodeId).then(response => {this.form = response.data;this.open = true;this.title = "查看条码";this.optType = "view";});},/** 修改按钮操作 */handleUpdate(row) {this.reset();const barcodeId = row.barcodeId || this.idsgetBarcode(barcodeId).then(response => {this.form = response.data;this.open = true;this.title = "修改条码";this.optType = "edit";});},/** 提交按钮 */submitForm() {this.$refs["form"].validate(valid => {if (valid) {if (this.form.barcodeId != null) {updateBarcode(this.form).then(response => {console.log(response);this.$modal.msgSuccess("修改成功");this.open = false;this.getList();});} else {addBarcode(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}}});},/** 删除按钮操作 */handleDelete(row) {const barcodeIds = row.barcodeId || this.ids;this.$modal.confirm('是否确认删除条码清单编号为"' + barcodeIds + '"的数据项？').then(function () {return delBarcode(barcodeIds);}).then(() => {this.getList();this.$modal.msgSuccess("删除成功");}).catch(() => { });},/** 导出按钮操作 */handleExport() {this.download('wm/barcode/export', {...this.queryParams}, `barcode_${new Date().getTime()}.xlsx`)},//物料选择handleSelectProduct() {this.$refs.itemSelect.showFlag = true;},//物料选择弹出框onItemSelected(obj) {if (obj != undefined && obj != null) {this.form.bussinessId = obj.itemId;this.form.bussinessCode = obj.itemCode;this.form.bussinessName = obj.itemName;this.form.barcodeContent = "".concat(this.form.barcodeType, '-', this.form.bussinessCode);}},//选择仓库、库区、库位getWarehouseList() {getTreeList().then(response => {if (response.data) {this.warehouseOptions = response.data.filter((el) => {return el.warehouseCode.indexOf('VIR') == -1;});;}this.warehouseOptions.map(w => {debugger;w.children.map(l => {let lstr = JSON.stringify(l.children).replace(/locationId/g, 'lId').replace(/areaId/g, 'pId').replace(/areaName/g, 'pName');l.children = JSON.parse(lstr);});let wstr = JSON.stringify(w.children).replace(/warehouseId/g, 'wId').replace(/locationId/g, 'pId').replace(/locationName/g, 'pName');w.children = JSON.parse(wstr);});let ostr = JSON.stringify(this.warehouseOptions).replace(/warehouseId/g, 'pId').replace(/warehouseName/g, 'pName');this.warehouseOptions = JSON.parse(ostr);debugger;});},handleWarehouseChanged(obj) {debugger;const checkedNode = this.$refs['warehouseRef'].getCheckedNodes();if (obj != null) {this.form.bussinessId = checkedNode[0].data.pId;this.form.bussinessCode = checkedNode[0].data.areaCode;this.form.bussinessName = checkedNode[0].data.pName;this.form.barcodeContent = "".concat(this.form.barcodeType, '-', this.form.bussinessCode);}},//装箱单选择handleSelectPackage() {this.$refs.packageSelect.showFlag = true;},/**选择装箱单返回 */onPackageSelected(obj) {if (obj != undefined && obj != null) {this.form.bussinessId = obj.packageId;this.form.bussinessCode = obj.packageCode;this.form.bussinessName = obj.clientName;this.form.barcodeContent = "".concat(this.form.barcodeType, '-', this.form.bussinessCode);}},/**选择工作站 */handleWorkstationSelect() {this.$refs.wsSelect.showFlag = true;},/**工作站选择返回 */onWorkstationSelected(obj) {if (obj != undefined && obj != null) {this.form.bussinessId = obj.workstationId;this.form.bussinessCode = obj.workstationCode;this.form.bussinessName = obj.workstationName;this.form.barcodeContent = "".concat(this.form.barcodeType, '-', this.form.bussinessCode);}},/*** 选择库存 */handleMaterialStockSelect() {this.$refs.stockSelect.showFlag = true;},/**库存选择返回 */onMaterialStockSelected(obj) {if (obj != undefined && obj != null) {this.form.bussinessId = obj.materialStockId;this.form.bussinessCode = obj.itemCode;this.form.bussinessName = "".concat(obj.itemName, '|', obj.specification, '|', obj.vendorName, '|', obj.batchCode);this.form.barcodeContent = "".concat(this.form.barcodeType, '-', this.form.bussinessId);}},handleConfig() {this.$refs.barcodeconfig.showFlag = true;},handleBatchPrint() {this.$refs.barcodebatchprint.showFlag = true;}}
};
</script>
<style scoped>
.barcodeClass {width: 100px;height: 200px;
}.barcodeFormClass {width: 200px;height: 200px;
}
</style>
这篇关于若依前端分离版中使用二维码功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
