基于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注入技巧
Jun 22 Javascript
javascript StringBuilder类实现
Dec 22 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 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
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
PHP 实现链式操作
2021/03/09 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
UNIX文件系统分类
2014/11/11 面试题
简历中个人自我评价范文
2013/12/26 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
活动志愿者自荐信
2014/01/27 职场文书
爱情保证书大全
2014/04/29 职场文书
房屋出售授权委托书
2014/10/12 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
入党转正申请报告
2015/05/15 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript