前端生成二维码和条形码，不能不知道的两个库

程序员老鱼

发布于 2022-12-02 10:57:57

1.7K0

发布于 2022-12-02 10:57:57

文章被收录于专栏：前端实验室

大家好,我是前端实验室的大师兄！

二维码和条形码在我们日常生活中可以说是处处可见，我们已经离不开他们了，无论是健康宝行程码，还是购物支付公交车

我们无时无刻不在使用，但是不知道各位程序员老爷们在程序中有没有生成过二维码呢？今天大师兄就带给大家一个生成二维码条形码的神器

二维码

qrcode 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

二维码是在一个正方形的框中填充各种点点或无规则小图形块而构成的图形，这种称之为二维码，他与一维码最大的区别就是存储容量大很多，而且保密性好。

二维码本质上表现给大家的就是一个静态图片，其实是包含特字加密算法的图形，里面存储的是一串字符串（即字母、数字、ASCII码等），这说明二维码不仅存储量大，而且存储的内容很广泛，数字、字母、汉字等都可以被存储。

安装使用

安装

npm install qrcode --save-dev

使用

<canvas id="qrcode"></canvas>

// 引入
import QRCode from "qrcode";
// 创建二维码方法
const createQrcode = (value, elemTarget) => {
    QRCode.toCanvas(document.querySelector(elemTarget), value);
};
//传入二维码的内容
createQrcode("#qrcode", "这里是前端实验室");

条形码

jsbarcode 是一个用于生成条形码的js库

条形码是日常生活中比较常见的，主要用于商品。通俗的理解就是一串字符串的集合（含字母、数字及其它ASCII字符的集合应用），常用来标识一个货品的唯一性，当然还有更多更深入与广泛的应用，像超市的商品、衣服、微信、支付宝、小程序等到处都有条形码的广泛应用

安装使用

安装

npm install jsbarcode --save-dev

使用

// 创建一个节点
<canvas id="canvas"></canvas>

// 引入
import JsBarcode from 'jsbarcode';
// 创建一个生成条形码的方法
    getBarcode() {
       // 设置一些参数
      let options = {
        text: "123456789", 
        displayValue: true,
        fontSize: 12,
        height: 40,
        width: 1,
      };
      this.$nextTick(() => {
        JsBarcode("#canvas", "987654321", options); 
        //#canvas 对应容器中的id
        //987654321 是条形码的携带的信息，和option中的text显示信息要区分
        //options:是条形码的配置信息
      });
    },

还有一种方式是在节点元素里传入参数：

<template>
  <div>
    <svg
      class="barcode"
      jsbarcode-format="upc"
      :jsbarcode-value="value"
      jsbarcode-fontoptions="bold"
    >
    </svg>
  </div>
</template>

<script>
import JsBarcode from 'jsbarcode';
export default {
  data() {
    return {
      value: '123456789012'
    }
  },
  mounted(){
    this.getBarcode();
    getBarcode.getBarcode("barcode").init();
  },
}
</script>