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

所属分类: 网络编程 / JavaScript 阅读数: 1348
收藏 0 赞 0 分享

引言

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

导读

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

html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>测试</title>
 <script src="https://cdn.zhanzhang360.cn/imgupload/004447/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>

不支持中文!!!!

效果

项目下载(附js插件)

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

提取码: ena4

更多精彩内容其他人还在看

Node.js事件的正确使用方法

这篇文章主要给大家介绍了关于Node.js事件的正确使用方法,文中通过示例代码介绍的非常详细,对大家学习或者使用Node.js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

微信小程序自定义导航栏实例代码

这篇文章主要给大家介绍了关于微信小程序自定义导航栏的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

js字符串处理之绝妙的代码

这篇文章主要介绍了js字符串处理之绝妙的代码,包括字符串去重、将字符放在对象中遍历拼接出字符串、把字符串的奇数位和偶数位分别提取到两个数组中、将两个数组按奇数位和偶数位插入拼接为字符串,有时候需要对字符进行处理的时候可以用得到
收藏 0 赞 0 分享

vue设计一个倒计时秒杀的组件详解

这篇文章主要介绍了vue设计一个倒计时秒杀的组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

详解服务端预渲染之Nuxt(介绍篇)

这篇文章主要介绍了详解服务端预渲染之Nuxt(介绍篇),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

javascrit中undefined和null的区别详解

这篇文章主要介绍了javascrit中undefined和null的区别详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈javascript中的prototype和__proto__的理解

这篇文章主要介绍了浅谈javascript中的prototype和__proto__的理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

详解vue中this.$emit()的返回值是什么

这篇文章主要介绍了详解vue中this.$emit()的返回值是什么,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

浅谈express.js框架中间件(middleware)

这篇文章主要介绍了浅谈express.js框架中间件(middleware),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue自定义指令directive的使用方法

这篇文章主要介绍了vue自定义指令directive的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多