龙
年
大
吉

使用js生成二维码和条形码

1.生成二维码

使用github开源项目qrcode。

1.引入方式一（js cdn引入）：

①.引入qrcode cdn：

自行下载、、没有合适的cdn，地址

<script src="js地址"></script>

②.在dom中插入：

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

③.后加入js配置：

var qrcode = new QRCode.toCanvas(document.getElementById('qrcode'), 'https://www.baidu.com', function(error) {
    if (error) console.error(error)
    console.log('success!');
})

④.整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <canvas id="qrcode"></canvas>
        <script src="qrcode.min.js"></script>
        <script>
            var qrcode = new QRCode.toCanvas(document.getElementById('qrcode'), 'https://www.baidu.com', function(error) {
                if (error) console.error(error)
                console.log('success!');
            })
        </script>
    </div>
</body>
</html>

⑤.运行④中的代码，即可得到想要的二维码，如图：

2.引入方拾二（npm包引入）：

①.在项目命令行中运行：

npm install qrcode --save

②.在需求页面引入qrcode：

var QRCode = require('qrcode');

③.在template中插入：

<canvas id="qrcode" />

 ④..在页面mouted后传入配置：

const qrcode = new QRCode.toCanvas(document.getElementById('qrcode'), 'https://www.baidu.com', function (error) {
      if (error) console.error(error)
      console.log('success!');
})

配置项后续填坑

2.生成条形码

使用github开源项目jsbarcode，jsbarcode可以生成img格式、svg格式、canvas格式的图片以及可以转成base64格式

1.引入方式一（js cdn引入）：

①.引入JsBarcode cdn或者下载到本地（地址）：

<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.8.0/dist/JsBarcode.all.min.js"></script>

②.任选一种格式，如下：

<svg id="barcode"></svg>
<!-- or -->
<canvas id="barcode"></canvas>
<!-- or -->
<img id="barcode"/>

③.后加入配置js代码：

JsBarcode("#barcode", "9780199532179", {
    format: "EAN13", // 条码格式
    displayValue: true,  // 是否在条码下显示值
    fontSize: 24, // 字体大小
    lineColor: "#0cc" // 条码与字体颜色
});

④.整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <canvas id="barcode" />
        <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.8.0/dist/JsBarcode.all.min.js"></script>
        <script>
            JsBarcode("#barcode", "9780199532179", {
                format: "EAN13",
                displayValue: true,
                fontSize: 24,
                lineColor: "#0cc"
            });
        </script>
    </div>
</body>
</html>

⑤.运行步骤④中的代码，即可显示正确的条码，如图：

⑥.JsBarcode的配置项如下表：

配置项 默认值 说明 属性类型
format "auto" (CODE128) 选择要使用的条码类型。 String
width 2 宽度选项是单条的宽度。 Number
height 100 条形码的高度。 Number
displayValue true 是否显示条码值 Boolean
text undefined 这个值会将默认value替换 String
fontOptions "" 使用fontOptions可以向条形码添加粗体或斜体文本。blod或italic String
font "monospace" 定义在生成的条形码中用于文本的字体。可以是任何默认字体，也可以是@font-face规则定义的字体。 String
textAlign "center" 设置文本的水平对齐方式。可以是left / center / right.。 String
textPosition "bottom" 设置文本的垂直位置。可以是top / bottom.。 String
textMargin 2 设置条形码和文本之间的距离。 Number
fontSize 20 设置值得字体大小 Number
background "#ffffff" 设置条形码的背景色 String (CSS color)
lineColor "#000000" 设置条形码颜色 String (CSS color)
margin 10 在条形码周围设置距离。如果没有设置其他内容，则所有边都将继承margin属性，可设置marginTop等 Number
marginTop undefined 设置条形码上边距 Number
marginBottom undefined 设置条形码下边距 Number
marginLeft undefined 设置条形码左边距 Number
marginRight undefined 设置条形码右边距 Number
valid function(valid){}   Function

2.引入方式二（npm包引入）：

①.在项目命令行中运行：

npm install jsbarcode --save

②.在需求页面引入jsbarcode：

var JsBarcode = require('jsbarcode');

③.在template中插入：

<svg id="barcode"></svg>
<!-- or -->
<canvas id="barcode"></canvas>
<!-- or -->
<img id="barcode"/>

④..在页面mouted后传入配置：

const jb = new JsBarcode(document.getElementById('barcode'), "1234", {
      format: "pharmacode",
      lineColor: "#0aa",
      width: 4,
      height: 40,
      displayValue: false
});

配置项参数同上。

 

posted @ 2019-01-18 16:55  电子猫  阅读(2067)  评论(0)  编辑  收藏  举报
博客已经出生了585天12小时9分18秒