基于jsbarcode 生成条形码并将生成的条码保存至本地+源码


Posted in Javascript onApril 27, 2020

引言

JsBarcode是一个用JavaScript编写的条形码生成器。它支持多种条形码格式,可在浏览器和Node.js中使用。如果你在项目中使用了jquery也可以使用jquery,但它不是依赖项。

导读

以前生成条码都是外网网站上生成,因生产环境在内网中,上不了外网,只能在项目中生成相应规则,故将此方法整理下来。

html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>测试</title>
 <script src="https://cdn.bootcss.com/jsbarcode/3.8.0/JsBarcode.all.min.js"></script>
</head>
<body>
 <h1>hhhhhhhhhhhhhhhhhhhhhhh</h1>
 <div class="box">
  <img id="barcode" />
 </div>
 <input type="text" id="content" placeholder="请输入条码内容"/>
 <input type="button" id="autoIma" value="生成" onclick="CreateIma()"/>
 <input type="button" id="btnsavaImg" value="保存图片到本地" onclick="Download()" />
 <script>
  //生成条码
  function CreateIma() {
   var content = document.getElementById('content').value;
   if (content == undefined || content == "") {
    alert("请输入条码内容!");
    return;
   };
   var barcode = document.getElementById('barcode'),
    //str = "chenyanbin",
    options = {
     format: "CODE128",
     displayValue: true,
     fontSize: 18,
     height: 100
    };
   JsBarcode(barcode, content, options); //原生JS方式
  // $('#barcode').JsBarcode(string, options); //jQuery方式
  }

  //将生成的条形码保存至本地
  function Download() {
   // 通过选择器获取img元素
   var img = document.getElementById('barcode')
   // 将图片的src属性作为URL地址
   var url = img.src
   var a = document.createElement('a')
   var event = new MouseEvent('click')

   a.download = name || '下载图片名称'
   a.href = url

   a.dispatchEvent(event) //根据A标签的属性来搞事情
  };
 </script>
</body>
</html>

不支持中文!!!!

效果

基于jsbarcode 生成条形码并将生成的条码保存至本地+源码

项目下载(附js插件)

链接: https://pan.baidu.com/s/10dEIgH6jwBL-0bAeRWxW4A

提取码: ena4

到此这篇关于基于jsbarcode 生成条形码并将生成的条码保存至本地+源码的文章就介绍到这了,更多相关jsbarcode 生成条形码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Jquery 常用方法经典总结
Jan 28 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
JavaScript toFixed() 方法
Apr 15 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
Node.js API详解之 tty功能与用法实例分析
Apr 27 #Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 #Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 #Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 #Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 #Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 #Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 #Javascript
You might like
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
JS 修改URL参数(实现代码)
2013/07/08 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
python实现电脑自动关机
2018/06/20 Python
python实现图片识别汽车功能
2018/11/30 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
高山背包:High Sierra
2017/11/23 全球购物
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
小学防溺水制度
2014/01/29 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
《故乡》教学反思
2014/04/10 职场文书
居委会工作总结2015
2015/05/18 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
世界十大狙击步枪排行榜
2022/03/20 杂记
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle