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

最新推荐文章于 2025-05-25 16:02:10 发布

转载最新推荐文章于 2025-05-25 16:02:10 发布 · 729 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/e-cat/p/10288560.html

本文详细介绍了如何使用JavaScript库qrcode和jsbarcode分别生成二维码和条形码。对于二维码，提供了通过js cdn引入和npm包引入两种方式，并展示了相应的代码示例。对于条形码，除了cdn和npm引入方式外，还列举了JsBarcode的配置项，帮助开发者生成不同格式的条形码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
});

配置项参数同上。

转载于:https://www.cnblogs.com/e-cat/p/10288560.html