最近在写打印的功能，就是PC端页面通过调用vue-printnb插件来实现打印功能。

vue插件——vue-print-nb 实现打印功能：http://t.csdnimg.cn/NWrPc

在打印的内容当中，有一维码+二维码，展示效果如下：

一维码的使用——JsBarcode——“jsbarcode”: “^3.11.5”

解决步骤1：npm install jsbarcode@3.11.5

你可以安装跟我同样的版本，或者安装最新版本(不指定版本号即为安装最新版本的插件)

解决步骤2：页面上局部引入jsbarcode

import JsBarcode from 'jsbarcode';

解决步骤3：dom元素需要是个img

 `<img id="order2` + index + `Id" />`

解决步骤4：使用JsBarcode来绘制一维码

JsBarcode('#scanItem2' + index + 'Id', item.orderNo, {
  format: 'CODE128', //条形码的格式
  width: 1, //线宽
  height: 40, //条码高度
  lineColor: '#000', //线条颜色
  displayValue: true, //是否显示文字
  margin: 2, //设置条形码周围的空白区域
  fontSize: 12,
});

第一个参数是一个id，可以是动态的，上面代码中，我是遍历的数组生成的一维码，所以是个动态的id参数
第二个参数是一维码的内容，可以是数字或者字符串啥的
第三个参数是一个对象，配置的是一维码的大小/格式/高度/线条颜色/是否显示文字/字号等

解决步骤5：为了保证不会出现一维码重复的问题，则需要在绘制之前先清空对应的dom

document.getElementById('scanItem2' + index + 'Id').html = ''

二维码的使用——QRCode——“qrcodejs2”: “^0.0.2”

解决步骤1：npm install qrcodejs2@0.0.2

你可以安装跟我同样的版本，或者安装最新版本(不指定版本号即为安装最新版本的插件)

解决步骤2：页面上局部引入qrcodejs2

import QRCode from 'qrcodejs2';

解决步骤3：dom元素需要是个div这样的元素

`<div id="order`+ index+`Id"></div>`

解决步骤4：使用QRCode 来绘制二维码

new QRCode('order' + index + 'Id', {
  text: item.orderNo,
  width: 80, //宽度
  height: 80, //高度
  colorDark: '#000000', //二维码方块颜色
  colorLight: '#ffffff', //背景颜色
  correctLevel: QRCode.CorrectLevel.Q, //容错率：L M Q H 依次递减
});

第一个参数是一个id，可以是动态的，上面代码中，我是遍历的数组生成的二维码，所以是个动态的id参数
第二个参数是二维码的内容，可以是数字或者字符串啥的
第三个参数是一个对象，配置的是二维码的宽高/格式/方块颜色/背景颜色等

解决步骤5：为了保证不会出现一维码重复的问题，则需要在绘制之前先清空对应的dom

document.getElementById('order' + index + 'Id').html = ''

注意：生成一维码和二维码中的id是不同的形式，一个是带#，一个是不带#的！！！

完成，多多积累，多多收获！！！