使用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

});

配置项参数同上。