使用js生成二維碼和條形碼

時間 2019-11-10

原文原文鏈接

1.生成二維碼

使用github開源項目qrcode。html

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

①.引入qrcode cdn：git

自行下載、、沒有合適的cdn，地址github

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

②.在dom中插入：npm

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

③.後加入js配置：canvas

var qrcode = new QRCode.toCanvas(document.getElementById('qrcode'), 'https://www.baidu.com', function(error) {

if (error) console.error(error)

console.log('success!');

})

④.總體代碼以下：dom

<!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>

⑤.運行④中的代碼，便可獲得想要的二維碼，如圖：svg

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

①.在項目命令行中運行：ui

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

配置項參數同上。