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

生成二维码

  1. 引入QRCode模块

npm install --save qrcode
import QRCode from 'qrcode';
  1. 页面代码

批量创建二维码及打印,所以加了个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';
  1. 页面代码

这是二维码扫描区域,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);
  1. 页面代码:

<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: "", // 打印的标题
        },
  }

  1. 效果图:

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码获取二维码内容扫码扫码扫码

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值