vue二维码生成、打印及识别

生成二维码

1. 引入QRCode模块

npm install --save qrcode

import QRCode from 'qrcode';

2. 页面代码

批量创建二维码及打印，所以加了个v-for

 <div id="printDiv"/**后面打印用到的区域id*/ :disabled="hussar_20Disabled" ref="hussar_20Ref" v-show="!hussar_20Hidden"
               class="hussar_20 jxd_ins_elContainer lay-container default">
            <div v-for="(item,index) in hussar_22Data.split(',')" style="float: left;height: 240px">
              <div><canvas :ref="'canvas'+index" class="canvas" ></canvas></div>//生成二维码的组件位置
              <div style="width: 100%;height: 85px; text-align: center"><span style="width:140px;display: inline-block;word-break: break-all;white-space: normal;">{{hussar_21Data.split(',')[index]}}</span></div>
        </div>

点击生成二维码按钮执行

 hussar_17Click() {
        const self = this;
        var dataList = self.hussar_22Data.split(",")
        setTimeout(()=>{
          for (var i = 0; i < dataList.length; i++) {
            let canvas = this.$refs[`canvas${i}`][0]//获取页面循环动态生成的二维码组件
            QRCode.toCanvas(
              canvas,
              dataList[i],//生成二维码的数据
              {width: 170, height: 170, margin: 1.5},//margin调整二维码的白边大小
              function (error) {
                if (error) {
                  console.log(error);
                }
              }
            );
          }
        },100)
      },

生成效果：

识别二维码

1. 引入QrcodeStream

npm install --save  vue-qrcode-reader

import { QrcodeStream } from 'vue-qrcode-reader';

2. 页面代码

这是二维码扫描区域，v-if="qrcodeshow"可以用来控制摄像头的开关（最开始没加导致摄像头一直处于被占用状态）

 <van-popup v-if="qrcodeshow" v-model="hussar_5Show" :position="hussar_5Position" closeable ref="hussar_5Ref" class="hussar_5 jxd_ins_ionPopup jxd-popup-mobile default">
        <qrcode-stream
                v-show="qrcode"
                :camera="camera"
                :torch="torchActive"
                @decode="onDecode"//识别成功后的回调
                @init="onInit"//初始化验证摄像头配置（不知道有没有用，反正写上没啥问题）
        >
          <div>
            <div class="qr-scanner">
              <div class="box">
                <div class="line"></div>
                <div class="angle"></div>
              </div>
              <div class="txt1">
                <div class="myQrcode">将二维码/条码放入框内，即自动扫描</div>
              </div>
            </div>
          </div>
        </qrcode-stream>
      </van-popup>

      onDecode(result) {
        console.log(result)//result就是识别后的内容
        self.qrcodeshow=false//识别成功后设为false关闭摄像头        
      },
      async onInit(promise) {
        const { capabilities } = await promise;
        const TORCH_IS_SUPPORTED = !!capabilities.torch;
        try {
          await promise;
        } catch (error) {
          if (error.name === 'NotAllowedError') {
            this.error = 'ERROR: 您需要授予相机访问权限';
          } else if (error.name === 'NotFoundError') {
            this.error = 'ERROR: 这个设备上没有摄像头';
          } else if (error.name === 'NotSupportedError') {
            this.error = 'ERROR: 所需的安全上下文(HTTPS、本地主机)';
          } else if (error.name === 'NotReadableError') {
            this.error = 'ERROR: 相机被占用';
          } else if (error.name === 'OverconstrainedError') {
            this.error = 'ERROR: 安装摄像头不合适';
          } else if (error.name === 'StreamApiNotSupportedError') {
            this.error = 'ERROR: 此浏览器不支持流API';
          }
        }
      },

样式信息：

.qr-scanner {
    background-image: linear-gradient(
            0deg,
            transparent 24%,
            rgba(229, 192, 149,0.1) 25%,
            rgba(229, 192, 149,0.1) 26%,
            transparent 27%,
            transparent 74%,
            rgba(229, 192, 149,0.1) 75%,
            rgba(229, 192, 149,0.1) 76%,
            transparent 77%,
            transparent
    ),
    linear-gradient(
            90deg,
            transparent 24%,
            rgba(229, 192, 149,0.1) 25%,
            rgba(229, 192, 149,0.1) 26%,
            transparent 27%,
            transparent 74%,
            rgba(229, 192, 149,0.1) 75%,
            rgba(229, 192, 149,0.1) 76%,
            transparent 77%,
            transparent
    );
    background-size: 3rem 3rem;
    background-position: -1rem -1rem;
    width: 100%;
    /* height: 100%; */
    height: 400px;
    /* height: 288px; */
    position: relative;
    background-color: #1110;
    /* background-color: #111; */
  }
  /* .qrcode-stream-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 82px;
    clear: both;
  } */
  /* .qrcode-stream-wrapper >>> .qrcode-stream-camera {
    width: 213px;
    height: 210px;
    clear: both;
    margin-top: 39px;
  } */
  .qr-scanner .box {
    width: 213px;
    height: 213px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border: 0.1rem solid rgba(229, 196, 118, 0.2);
    /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
  }
  .qr-scanner .txt1 {
    width: 100%;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    text-align: center;
    /* color: #f9f9f9; */
    margin: 0 auto;
    position: absolute;
    top: 80%;
    left: 0;
  }
  .qr-scanner .myQrcode {
    text-align: center;
    color: rgba(229, 192, 149,0.99);
  }
  .qr-scanner .line {
    height: calc(100% - 2px);
    width: 100%;
    background: linear-gradient(180deg, rgba(229, 192, 149, 0) 43%, rgba(229, 192, 149) 211%);
    border-bottom: 2px solid rgba(63, 229, 221, 0.99);
    transform: translateY(-100%);
    animation: radar-beam 2s infinite alternate;
    animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
    animation-delay: 1.4s;
  }
  .qr-scanner .box:after,
  .qr-scanner .box:before,
  .qr-scanner .angle:after,
  .qr-scanner .angle:before {
    content: '';
    display: block;
    position: absolute;
    width: 3vw;
    height: 3vw;
    border: 0.2rem solid transparent;
  }
  .qr-scanner .box:after,
  .qr-scanner .box:before {
    top: 0;
    border-top-color: rgba(229, 220, 159, 0.67);
  }
  .qr-scanner .angle:after,
  .qr-scanner .angle:before {
    bottom: 0;
    border-bottom-color: rgba(229, 220, 159, 0.67);
  }
  .qr-scanner .box:before,
  .qr-scanner .angle:before {
    left: 0;
    border-left-color:rgba(229, 220, 159, 0.67);
  }
  .qr-scanner .box:after,
  .qr-scanner .angle:after {
    right: 0;
    border-right-color: rgba(229, 220, 159, 0.67);
  }

Vue打印指定区域

js原生的windows.print()会将整个页面打印出来，所以使用vue-print-nb

1. 安装并在main.js或index.js中注册

npm i vue-print-nb

import Print from 'vue-print-nb'
Vue.use(Print);

2. 页面代码：

<el-button tabindex="" :disabled="hussar_19Disabled" v-print="printObj" ref="hussar_19Ref"
    v-show="!hussar_19Hidden" class="hussar_19 jxd_ins_elButton lay-btn button_additional default">
    <i class=""></i>
    <span>打印</span>
</el-button>

  data() {
      return {
        printObj: {
          id: "printDiv", // 这里是要打印元素的ID
          popTitle: "", // 打印的标题
        },
  }

3. 效果图：