VUE生成二维码或条形码

超、凢脫俗 2023-10-03 20:38 52阅读 0赞

**二维码生成**

\`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>