二维码条形码生成的JavaScript脚本库


Posted in Javascript onJuly 07, 2022

引言

二维码条形码生成的JavaScript脚本库

二维码或条形码在日常生活中现在应用已经非常普遍了,文章分享生成条形码和二维码的JavaScript库。

条形码

条形码是日常生活中比较常见的,主要用于商品。通俗的理解就是一串字符串的集合(含字母、数字及其它ASCII字符的集合应用),用来常用来标识一个货品的唯一性,当然还有更多更深入与广泛的应用,像超市的商品、衣服、微信、支付宝、小程序等到处都有条形码的广泛应用;

安装依赖:

npm install jsbarcode --save-dev

在 HTML 页面上加入以下代码:

<svg id="barcode"
  jsbarcode-value="123456789012"
  jsbarcode-format="code128"></svg>

接下来看下 JavaScript 代码,如下:

import jsbarcode from 'jsbarcode';
const createBarcode = (value, elemTarget) => {
    jsbarcode(elemTarget, "value");
};
createBarcode("#barcode", "devpoint");

运行成功的效果如下:

二维码条形码生成的JavaScript脚本库

二维码

相比条形码,二维码的使用场景也越来也多,支付码、场所码、小程序等等。二维码的长相经常是在一个正方形的框中填充各种点点或无规则小图形块而构成的图形,这种称之为二维码,他与一维码最大的区别就是存储容量大很多,而且保密性好。二维码本质上表现给大家的就是一个静态图片,其实是包含特字加密算法的图形,里面存储的是一串字符串(即字母、数字、ASCII码等),这说明二维码不仅存储量大,而且存储的内容很广泛,数字、字母、汉字等都可以被存储。

安装依赖:

npm install qrcode --save-dev

HTML:

<canvas id="qrcode"></canvas>

JavaScript:

import QRCode from "qrcode";
const createQrcode = (value, elemTarget) => {
    QRCode.toCanvas(document.querySelector(elemTarget), value);
};
createQrcode("#qrcode", "devpoint");

效果如下:

二维码条形码生成的JavaScript脚本库

以上就是二维码条形码生成的JavaScript脚本库的详细内容,更多关于JavaScript二维码条形码的资料请关注三水点靠木其它相关文章!


Tags in this post...

Javascript 相关文章推荐
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
JS实现简单的九宫格抽奖
JS实现九宫格拼图游戏
JavaScript实现九宫格拖拽效果
JS实现简单九宫格抽奖
Jun 28 #Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 #Javascript
React自定义hook的方法
Jun 25 #Javascript
小程序实现侧滑删除功能
Jun 25 #Javascript
You might like
PHP静态类
2006/11/25 PHP
php 前一天或后一天的日期
2008/06/28 PHP
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
php中chdir()函数用法实例
2014/11/13 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
jQuery EasyUI 中文API Layout(Tabs)
2010/04/27 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
一百行JS代码实现一个校验工具
2019/04/30 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
基于Django用户认证系统详解
2018/02/21 Python
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
linux面试相关问题
2013/04/28 面试题
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
大学生涯自我鉴定
2014/01/16 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
超市促销活动总结
2014/07/01 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
2019入党申请书格式
2019/06/25 职场文书
vue如何清除浏览器历史栈
2022/05/25 Vue.js