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

已于 2023-03-02 08:16:19 修改
阅读量1.5k 收藏 8
点赞数 1
分类专栏： vue 文章标签： vue.js javascript 前端 Powered by 金山文档
于 2023-03-01 15:22:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34465882/article/details/129281294
版权

生成二维码

  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
    评论
专栏目录
利用VUE生成二维码（两种方式），面试看这个就够了
m0_61369275的博客
04-16 1193
刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。vue有两种生成二维码的方式，qrcode、vue-qr（有icon）；
qrcode生成二维码微信长按无法识别问题的解决
10-17
主要介绍了qrcode生成二维码微信长按无法识别问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 批量打印二维码含LOGO图片
灰色头像@的博客
09-06 641
实现效果如下图↓。
vue+element 动态生成二维码并选择批量打印表格内容
weixin_46607967的博客
11-04 2980
下载生成二维码的插件(vue-qr) npm install vue-qr --save 下载打印库(printJS) npm install print-js --save 在main.js里引入 引入vue-qr的两种方式 // vue2.0 引入Vue-qr import VueQr from 'vue-qr' // vue3.0 引入Vue-qr import vueQr from 'vue-qr/src/packages/vue-qr.vue' new Vue({
使用 Vue 3 和 qrcode.js 开发二维码显示组件
最新发布
nbsaas-boot基于Request-Response的企业级快速开发框架
05-31 789
在valuesize和level。value是必需的字符串道具，用于生成二维码的数据。size是可选的数字道具，指定二维码的大小，默认值为 200。level是可选的字符串道具，指定二维码的纠错级别，默认值为M，支持L（低）、M（中）、Q（四分之一）、H（高）四种级别。为了确保传入的纠错级别是有效的，我们使用了validator函数进行验证。
vue项目中批量打印二维码
Clearlove_8的博客
05-11 1950
综合了两个文章实现。首先使用qrcode实现生成。然后window.open和window.print打印 一、生成二维码 （原文链接：https://www.cnblogs.com/feijiediyimei/p/11136607.html） 最近项目有个需求，需要将一个连接生成二维码展示出来，然后在网上找到了QRCode这个插件，这里大致记录下它的使用方法 介绍： QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5
vue2踩坑之项目：生成二维码使用vue-print-nb打印二维码
意初的博客
09-06 790
vue2踩坑之项目：生成二维码使用vue-print-nb打印二维码，import print from 'vue3-print-nb' directives: { print } //自定义指令中注册。vue3安装 npm install vue3-print-nb --save。vue2安装 npm install vue-print-nb --save。directives: { print} //自定义指令中注册。//vue2 引入方式 全局 main.js。
vue基于qrcodejs2实现批量打印二维码
weixin_51716488的博客
11-25 1829
vue基于qrcodejs2实现批量打印二维码
vue生成二维码图片并且下载图片到本地
weixin_54930261的博客
07-07 924
要是项目框架有的,就用项目的,只要找到canvas。
在Vue3中使用vue-qrcode库实现二维码生成
一起学习
12-26 6212
本文主要介绍在Vue3中使用qrcode库实现二维码生成的方法。
vue生成二维码
04-26 4036
目录 qrcodejs2 vue-qr qrcodejs2 下载qrcodejs2 cnpm i -S qrcodejs2 使用 <template> <span ref="qrCodeUrl"></span> </template> <script> import QRCode from "qrcodejs2"; export default { data() { return {}; }, mo
vue 二维码长按保存和复制内容操作
10-14
在Vue开发中，有时我们需要实现二维码的生成以及与之相关的功能，如长按保存到相册和复制内容。本文将详细介绍如何在Vue项目中实现这些功能。 首先，我们需要安装两个关键的Vue插件：`qrcode.vue` 和 `vue-...
qrcode.js生成二维码JS
11-16
此外，还可以结合其他技术如Vue、React等，创建动态生成二维码的组件。 ### 6. 扩展应用 - **自定义样式**：可以通过CSS调整二维码容器的样式，例如边框、背景等。 - **错误纠正**：根据实际需求选择不同的错误纠正...
生成一维码二维码并调用打印机打印
07-28
以下将详细介绍一维码、二维码的生成原理及如何调用打印机进行打印。 一维码，如EAN-13、UPC-A等，通常包含12或13位数字，用于标识商品信息。它们由黑色和白色条纹组成，宽度不一，代表不同数值。生成一维码的过程...
vue生成二维码和条形码
tt1234561009的博客
07-11 1485
以上就可以生成二维码、条形码了，不过如果在页面初始化的时候生成可能会出现转码失败的情况，这个时候可以尝试用nextTick包裹，或许可以解决问题。安装依赖：npm install qrcodejs2 --save。安装依赖：npm install jsbarcode --save。调用 new QRcode 生成二维码。调用JsBarcode构造函数生成条形码。在需要生成二维码的页面引入即可。在需要生成条形码的页面引入即可。
生成导出、批量生成导出二维码
jiangzhihao0515的博客
09-12 355
此类功能一般用于管理系统当中，目的是做到大批量生成二维码并进行导出压缩包以下实例使用语言为vue2.x，可根据不同JS语言环境自行配置。
vue 刷新二维码防止使用缓存数据的解决办法
nimei31的博客
06-05 2231
前两天做个刷新二维码的东西，发现url用的是缓存数据，即使url调用的二维码图片内容已经变化，但是vue这边还是用的缓存，必须手动刷新，用下面的方法解决： data() { return { qrcode_url:"/api/qr_code", //我的页面使用这个地址变量 } }, methods: { refres...
vue启用打印机打印-二维码条形码打印
qq_41206305的博客
10-11 979
使用px来设置距离需谨慎，相同px在不同纸张呈现大小可能是不相同的。小距离的变动px是无法呈现的。（举个栗子：在某一纸张上1px=0.3mm，此时我只想上移0.2mm）构建所需要打印的内容，利用vue-print-nb进行打印。二维码条形码打印的本质就是图片打印。注意：在页面上设置的样式打印时是没效果的，这里需要用过媒体查询来设置样式。所需插件 vue-print-nb 本文版本1.7.5。资产、设备管理必备的二维码条形码打印。
vue项目生成二维码功能使用QRCode
热门推荐
qinyuhua93的博客
01-30 3万+
1，导入第三方插件 npm install --save qrcode 2，在页面上引入 import QRCode from 'qrcodejs2' 二维码位置 methods: { qrcode () { let qrcode = new QRCode('qrcode', { width: 100, height: 100,
vue二维码生成有效期
08-15
在Vue中生成二维码时，可以使用第三方库如`qrcode`或`vue-qrcode`来实现。这些库通常提供了一些配置选项，可以用来设置二维码的有效期。 一种常见的做法是，在生成二维码之前，先计算出二维码的过期时间，然后将其作为参数传递给生成二维码的函数。例如，可以通过获取当前时间，并加上有效期的时间戳来计算出过期时间，然后将过期时间作为参数传递给生成二维码的函数。 具体的代码示例如下（以`qrcode`库为例）： ```javascript import QRCode from 'qrcode'; // 计算过期时间 const expirationTime = new Date().getTime() + 60 * 60 * 1000; // 当前时间加上一小时 // 生成二维码 QRCode.toCanvas(canvas, 'https://example.com', { width: 200, height: 200, color: { dark: '#000000', light: '#ffffff', }, // 将过期时间作为参数传递给生成二维码的回调函数 callback: function (error) { if (error) { console.error(error); } else { console.log('二维码生成成功'); } }, }); ``` 以上代码示例中，将过期时间设置为当前时间加上一小时（60分钟 * 60秒 * 1000毫秒）。你可以根据需要调整有效期的时长。 需要注意的是，二维码的有效期只是一种控制机制，实际上，二维码本身并不会自动失效。你需要在使用二维码的时候，根据过期时间来判断二维码是否仍然有效，并进行相应的处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值