基于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 相关文章推荐
JavaScript 字符编码规则
May 04 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
在nuxt中使用路由重定向的实例
Nov 06 Javascript
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合并数组+与array_merge的区别分析
2010/08/01 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
跟老齐学Python之数据类型总结
2014/09/24 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Python Requests库基本用法示例
2018/08/20 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
七匹狼男装广告词
2014/03/21 职场文书
电子信息工程自荐信
2014/05/26 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers