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>Documenttitle>
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或者下载到本地（地址）：
②.任选一种格式，如下：
<svg id="barcode">svg> <canvas id="barcode">canvas> <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>Documenttitle>
head>
<body>
<div>
<canvas id="barcode" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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> <canvas id="barcode">canvas> <img id="barcode"/>
④..在页面mouted后传入配置：
const jb = new JsBarcode(document.getElementById('barcode'), "1234", {
format: "pharmacode",
lineColor: "#0aa",
width: 4,
height: 40,
displayValue: false
});
配置项参数同上。