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",
4,
height: 40,
displayValue: false
});
配置项参数同上。