项目开发需要,优惠券分不同类型,简单的使用id生成条形码供店铺使用,麻烦点的需要多个字段的就需要使用二维码来展示了,对应的效果如下



条形码(一维码)使用工具code128

需引入code128.js 和对应的 code123.css, 具体代码可以看 https://www.jb51.net/article/103472.htm

由于项目是vue开发,所以code128.js 稍微改一下,export 出createBarcode接口

export default function createBarcode(showDiv,textValue,barcodeType){
var divElement = document.getElementById(showDiv);
divElement.innerHTML = code128(textValue,barcodeType);
}
import createBarcode from '@/utils/code128'
调用:
createBarcode("barcodeDiv", this.couponInfo.data.id, 'B', true)

二维码 使用工具 qrcodejs2

npm install qrcodejs2 --save

调用
import QRCode from 'qrcodejs2'
new QRCode(document.getElementById('qrcode'), {
width: 120,
height: 120,
text: `{"customeruid":${this.couponInfo.data.customerUid}, "shoppingcarduid": ${this.couponInfo.data.UId}}` //二维码保存内容
})

具体参数看文档吧~

vue项目条形码和二维码生成工具试用的更多相关文章

  1. 谷歌zxing 二维码生成工具

    一.加入maven依赖 <!-- 谷歌zxing 二维码 --> <dependency> <groupId>com.google.zxing</groupI ...

  2. 二维码生成工具类java版

    注意:这里我不提供所需jar包的路径,我会把所有引用的jar包显示出来,大家自行Google package com.net.util; import java.awt.BasicStroke; im ...

  3. 二维码生成工具——QRCode

    下载QRCode的源代码:https://github.com/davidshimjs/qrcodejs 引入项目中:<script type="text/javascript&quo ...

  4. Java 二维码生成工具类

    /** * 二维码 工具 * * @author Rubekid * */ public class QRcodeUtils { /** * 默认version */ public static fi ...

  5. 开发ASP.NET MVC 开发名片二维码生成工具 (原创)

    在网上找了很多,都只能生成网址,不能生成名片二维码,于是自己动手. 第一步,写视图界面,主要代码如下: <script type="text/javascript"> ...

  6. java二维码生成工具

    import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.ut ...

  7. C#利用Zxing.net生成条形码和二维码并实现打印的功能

        开篇:zxing.net是.net平台下编解条形码和二维码的工具. 下载地址:http://pan.baidu.com/s/1kTr3Vuf Step1:使用VS2010新建一个窗体程序项目: ...

  8. 使用谷歌Z生成条形码以及二维码

    下载地址:http://zxingnet.codeplex.com/ zxing.net是.net平台下编解条形码和二维码的工具,使用非常方便. 首先下载二进制dll文件,引入工程: using Sy ...

  9. Android开发——Android中的二维码生成与扫描

    0. 前言 今天这篇文章主要描述二维码的生成与扫描,使用目前流行的Zxing,为什么要讲二维码,因为二维码太普遍了,随便一个Android APP都会有二维码扫描.本篇旨在帮助有需求的同学快速完成二维 ...

随机推荐

  1. scrapy shell 用法(慢慢更新...)

    scrapy shell 命令 1.scrapy shell url #url指你所需要爬的网址 2.有些网址数据的爬取需要user-agent,scrapy shell中可以直接添加头文件, 第①种 ...

  2. rpmdb: Thread/process 9180/139855524558592 failed: Thread died in Berkeley DB library

    使用yum安装出现问题:rpmdb: Thread/process 9180/139855524558592 failed: Thread died in Berkeley DB library 解决 ...

  3. reverse和reverse_copy函数的应用

    reverse函数的作用是:反转一个容器内元素的顺序.函数参数:reverse(first,last);//first为容器的首迭代器,last为容器的末迭代器.它没有任何返回值. 这个函数比较简单, ...

  4. 20165301 预备作业二:学习基础和C语言基础调查

    <做中学>读后感及C语言学习调查 读<做中学>有感 娄老师在文章中多次提到「做中学(Learning By Doing)」的概念,并通过娄老师自己的减肥经历.五笔练习经历.乒乓 ...

  5. html学习-DOM操作

    1.dom介绍 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关 ...

  6. 如何在获取celery中的任务执行情况

    开始以为在flower中获取,原来flower也是从celery中获取的. 如果直接用celery命令,一直会提示拒绝连接. 网上说了,用django命令就可以的. 于是试了下,OK了. 这样,至少可 ...

  7. day4迭代器&生成器&正则表达式

    一.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不能后退,不过这也没什么,因为人们很少在迭代途中后退.另外,迭代器的一大优点 ...

  8. (转)Where与Having的总结

    Where 是一个约束声明,使用Where来约束来之数据库的数据,Where是在结果返回之前起作用的,且Where中不能使用聚合函数. Having 是一个过滤声明,是在查询返回结果集以后对查询结果进 ...

  9. 修改input中的placeholder属性的颜色

    input::-webkit-input-placeholder{ color:#e8e8e8; } input::-moz-placeholder{ /* Mozilla Firefox 19+ * ...

  10. 20179202《Linux内核原理与分析》第一周作业

    实验一 Linux 系统简介 这一节主要学习了Linux的历史,重要人物以及学习Linux的方法.Linux和Windows在是否收费.软件与支持.安全性.可定制性和应用范畴等方面都存在着区别.目前感 ...