vue 生成条形码、二维码

2023-11-02

条形码
1.安装

cnpm install jsbarcode --save

2.引入

import JsBarcode from 'jsbarcode'

3.二维码容器

<svg id="barcode"></svg>
<canvas id="canvas"></canvas>
<img id="barcode"/>

4.生成条形码(我只用了 displayValue: false,都用暂时显示报错)

JsBarcode("#barcode", "1234", {
  format: "pharmacode",  //条形码的格式
  lineColor: "#0aa",  //线条颜色
  width:4, //线宽
  height:40,  //条码高度
  displayValue: false //是否显示文字信息
})

二维码
1.安装

cnpm install jr-qrcode --save

2.引入

import jrQrcode from "jr-qrcode"

3.二维码容器

<canvas class="servicecanvas"></canvas>

4.生成条形码(我只用了 displayValue: false,都用暂时显示报错)

 this.$nextTick(()=>{
        let serviceurl = serviceur //二维码内容
        let canvas = document.getElementsByClassName('servicecanvas')
        QRCode.toCanvas(canvas, serviceurl, function (error) {
          if (error) console.error(error)

           })
      })
})

我在for循环渲染多个时,出现闪退。
最后发现是画布定义为undefined,提前把画布定义好即可

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue 生成条形码、二维码 的相关文章

  • 【UE4】UE4内使用Sqlite数据库

    写在前面 系统环境 Win10 X64 引擎版本为 UE4 17 2 编译器版本为 VS2015Pro 因为项目需要数据库对一些数据进行管理和其他的操作 所以花了些时间研究了一下如何在UE4中使用Sqlite数据库 围观了许多Blog和An

随机推荐

  • 什么是单页面,什么是多页面,单页面和多页面的区别

    SPA单页面应用 指只有一个主页面的应用 一开始只需要加载一次css js等相关资源 所有内容都包含在主页面 对每一个功能模块组件化 单页面应用跳转 就是切换相关组件 仅仅只是刷新局部资源 MPA多页面应用 指有多个独立页面的应用 每个页面
  • C++ Class Mapped Google Protocol Buffer Message

    摘要 Google Protocol Buffer 是一个优秀的基于二进制的网络消息编解码框架 应用于项目时 可以节省不少的人力资源 开发时间和程序BUG 但其不足之处是protobuf编译器生成的C 消息类 或者Java等其他语言的消息类
  • Web 前端开发技术 —— JavaScript

    Web 前端开发技术 JavaScript 总结 JavaScript 内容 文章目录 Web 前端开发技术 JavaScript 一 js 的引用方式与执行顺序 1 引用方式 在标签中直接写 js 代码 复用 js 代码 通过 impor
  • PL/SQL DEVELOPER执行计划的查看 (转)

    字号 订阅 这里 我学到的一个很重要的东西 就是用 PL SQL DEVELOPER去看一条 SELECT语句的执行计划 执行计划里面可以看到这条 SELECT语句的开销 I O操作开销等数值 可以很清晰地看到语句各个部分的执行效率 选中这
  • 电子科技大学操作系统期末复习笔记(二):进程与并发控制

    目录 前言 进程管理 进程基本知识 程序的顺序执行 前趋图 程序的并发执行 并发程序 进程的定义和特征 进程的特征和状态 操作系统内核 定义 功能 原语 原子操作的实现 操作系统控制结构 进程控制块PCB 进程组织 进程树 进程的创建 进程
  • openwrt路由器不断重启问题原因

    重新烧固件之后 openwrt不断重启 df h一看root的空间已满 这说明了原因是flash存储容量不够了 减掉一些不需要的功能重新编译烧固件 或者增加存储来解决吧
  • 解决 docker 容器无法通过 IP 访问宿主机问题

    问题起源 在使用 docker 的过程中我不幸需要在 docker 容器中访问宿主机的 80 端口 而这个 80 端口是另外一个容器 8080 端口映射出去的 当我在容器里通过 docker 的网桥 172 17 0 1 访问宿主机时 居然
  • 如何搭建从DNS服务器

    准备 两台主机 一台主 一台从 1 在从节点 vim etc named rfc1912 zones zone magedu com type slave masters 192 168 37 7 file slaves magedu co
  • m皇后(小白版)

    m皇后 牛客 题目链接 本题 https ac nowcoder com acm problem 15295 八皇后问题 题目链接 NOI http noi openjudge cn ch0205 1700 洛谷 https www luo
  • CSS in JS之styled-components

    代码已经关联到github 链接地址 觉得不错可以顺手点个star 这里会持续分享自己的开发经验 我们都知道 JSX是JS语法的扩展 增加了对HTML语法的支持 那距离all in js就只差一个CSS语法支持了 目前实现该功能的库比较出名
  • vue 使用 Animate.css 实现 联系我们 组件开发

    首先 要清楚 Animate css 是一个 css动画库 为我们封装好了动画效果 我们只需要根据需求选择对应的css写入到div上即可 animate css https animate style fade title 淡入淡出 fad
  • Tensorflow object detection API源码分析之如何构建模型

    模型的具体参数被定义在config文件中 如samples configs ssd mobilenet v2 coco config model ssd num classes 90 box coder faster rcnn box co
  • Obsidian中HTML本地图片无法显示问题

    问题分析 我之前在记笔记的markdown中插入图片时 都是用 img src imgs lw68 png width 15 这样的形式 好处是方便大小和位置的调节 但用Obsidian直接打开原先的markdown文件时 这些图片是无法显
  • 计算机如何执行(运行)程序

    1 1 计算机如何执行 运行 程序 当打开计算机时 主内存 RAM 是空的 计算机要做的第一件事就是将操作系统从硬盘加载到主存 RAM 中 操作系统被加载到主存 RAM 后 可以执行 运行 任何您希望运行的程序 应用程序软件 通常通过点击
  • [948]Pandas数据分组的函数应用(df.apply()、df.agg()、df.transform()、df.applymap()、df.groupby())

    文章目录 apply 数据聚合agg 数据转换transform applymap groupby apply 分组 分组 可迭代对象 其他轴上的分组 通过字典或者Series分组 通过函数分组 分组计算函数方法 多函数计算 agg 将自己
  • vue简单的倒计时组件

    例如想要获取今年的国庆倒计时 2023 10 1 可以先在组件中定义好时间 可以在props中给默认值 方便可以在组件中切换其他时间 默认给今年国庆 vue2语法 props date type String default 2023 10
  • 概率论 - 常见分布(及其分布表)

    分布表在对应的分布下边 离散型的分布 一 0 1分布 二 几何分布 三 二项分布 四 泊松分布 五 超几何分布 连续性的分布 一 均匀分布 二 指数分布 三 正态分布与标准正态分布 格格不入的三个分布 一 卡方分布 二 t 分布 三 F 分
  • RabbitMQ延时消息队列

    1 延时队列介绍 延时队列即放置在该队列里面的消息是不需要立即消费的 而是等待一段时间之后取出消费 那么 为什么需要延迟消费呢 我们来看以下的场景 网上商城下订单后30分钟后没有完成支付 取消订单 如 淘宝 去哪儿网 系统创建了预约之后 需
  • visual studio 2019 sql server localdb 数据库中文乱码解决方法

    今天使用localdb学习asp net core时 发现写入localdb数据库的中文为乱码 按照网上的方法解决 却无法显示 这里只有用sql语句更改了 参考这个 但我试了不成功 用sql语句更改可以 https www cnblogs
  • vue 生成条形码、二维码

    条形码 1 安装 cnpm install jsbarcode save 2 引入 import JsBarcode from jsbarcode 3 二维码容器