JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】

本文实例讲述了JS条形码插件JsBarcode用法。分享给大家供大家参考，具体如下：

这里介绍一下在GitHub生成条形码的js插件→JsBarcode

条码支持的有:

CODE128
  CODE128 (自动模式切换)
  CODE128 A/B/C (强制模式)
EAN
  EAN-13
  EAN-8
  EAN-5
  EAN-2
  UPC (A)
CODE39
ITF-14
MSI
  MSI10
  MSI11
  MSI1010
  MSI1110
Pharmacode
Codabar

代码：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
 <title></title>
 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
 <script type="text/javascript" src="js/JsBarcode.all.js"></script>
 </head>
 <body>
 <svg id="svgcode"></svg>
 <!-- or -->
 <canvas id="canvascode"></canvas>
 <!-- or -->
 <img id="imgcode" />
 <script>
  $("#svgcode").JsBarcode('Hi!');//or JsBarcode("#svgcode", "Hi!");
  $("#canvascode").JsBarcode('Hello world!');//or JsBarcode("#canvascode", "Hello world!");
  $("#imgcode").JsBarcode("I'm huangenai!");//or JsBarcode("#imgcode", "I'm bwju!");
 </script>
 </body>
</html>

JsBarcode 我们还可以设置条码的一些属性（可设置属性详细介绍 链接：https://github.com/lindell/JsBarcode/wiki/Options）

<img />
<script>
JsBarcode("#imgcode", "123", {
 format: "CODE39",//选择要使用的条形码类型
 width:3,//设置条之间的宽度
 height:100,//高度
 displayValue:true,//是否在条形码下方显示文字
 text:"456",//覆盖显示的文本
 fontOptions:"bold italic",//使文字加粗体或变斜体
 font:"fantasy",//设置文本的字体
 textAlign:"left",//设置文本的水平对齐方式
 textPosition:"top",//设置文本的垂直位置
 textMargin:5,//设置条形码和文本之间的间距
 fontSize:15,//设置文本的大小
 background:"#eee",//设置条形码的背景
 lineColor:"#2196f3",//设置条和文本的颜色。
 margin:15//设置条形码周围的空白边距
});
</script>

GitHub：https://github.com/lindell/JsBarcode
条码生成器：http://lindell.me/JsBarcode/generator/
JsBarcode示例与设置：http://codepen.io/lindell/pen/mPvLXx?editors=1010
简单的JsBarcode演示：http://codepen.io/lindell/pen/eZKBdO?editors=1010

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript图形绘制技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • Node.js 条形码识别程序构建思路详解

    Node.js 条形码识别程序构建思路详解

    在这篇文章中,我们将展示一个非常简单的方法构建一个自定义的 Node 模块,该模块封装了Dynamsoft Barcode Reader SDK ,支持 Windows.Linux 和 OS X,同时我们将演示如何集成这块模块实现一个在线的条形码读取应用. 越来越多的 Web 开发者选择 Node 来构建网站,因为使用 JavaScript 来开发复杂的服务器端 Web 应用越来越便利.为了扩展在不同平台下的 Node 的功能,Node 允许开发者使用 C/C++ 来创建扩展. 介绍 Dynam

  • JS生成一维码(条形码)功能示例

    JS生成一维码(条形码)功能示例

    本文实例讲述了JS生成一维码(条形码)功能的方法.分享给大家供大家参考,具体如下: 1.js代码: (function() { if (!exports) var exports = window; var BARS = [212222,222122,222221,121223,121322,131222,122213,122312,132212,221213,221312,231212,112232,122132,122231,113222,123122,123221,223211,22113

  • 使用JavaScript根据图片获取条形码的方法

    使用JavaScript根据图片获取条形码的方法

    最近在弄一个零售超市的项目,但是苦于需要自己录入数据,超市少的也有1000多种商品,自己一个一个录入肯定不太现实,所以考虑扫描商品的条形码,根据条形码获取商品的信息这样效率就高多了. 根据条形码获取商品信息这个在网上有很多api一般都是付费的费用不高,可以直接拿来用,这里就略过了. 这里重点说说JavaScript识别图片中的条形码. 开源库quaggaJS 项目地址:https://github.com/serratus/quaggaJS 这里要感谢大神提供这么牛B的js库,让我的想法得以实现

  • JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】

    JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】

    本文实例讲述了JS条形码插件JsBarcode用法.分享给大家供大家参考,具体如下: 这里介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE128   CODE128 (自动模式切换)   CODE128 A/B/C (强制模式) EAN   EAN-13   EAN-8   EAN-5   EAN-2   UPC (A) CODE39 ITF-14 MSI   MSI10   MSI11   MSI1010   MSI1110 Pharmacode Cod

  • 基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解

    基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文件上传插件File Input的使用. 1.文件上传插件File Input介绍 这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http:/

  • 对node.js中render和send的用法详解

    大多数情况下,渲染内容用res.render(),将会根据views中的模板文件进行渲染.如果不想使用views文件夹,想自己设置文件夹名字,那么app.set("views","aaaa"); 如果想写一个快速测试页,当然可以使用res.send().这个函数将根据内容,自动帮我们设置了Content-Type头部和200状态码.send()只能用一次,和end一样.和end不一样在哪里?能够自动设置MIME类型. 如果想使用不同的状态码,可以: res.stat

  • JS产生随机数的几个用法详解

    JS产生随机数的几个用法详解 <script> function GetRandomNum(Min,Max) { var Range = Max - Min; var Rand = Math.random(); return(Min + Math.round(Rand * Range)); } var num = GetRandomNum(1,10); alert(num); </script> var chars = ['0','1','2','3','4','5','6','7

  • JS、jQuery中select的用法详解

    1.js var obj=document.getElementById(selectid); obj.options.length = 0; //清除所有内容 obj.options[index] = new Option("three",3); //更改对应的值 obj.options[index].selected = true; //保持选中状态 obj.add(new Option("4","4")); "文本",&

  • Vue.js 中的 v-show 指令及用法详解

    1 用法 v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏. html: <div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p> </div> js: <script> var app = new Vue({ el: '#app', data: { type:'技术' } }); </sc

  • Vue.js slot插槽的作用域插槽用法详解

    Vue.js slot插槽的作用域插槽用法详解

    目录 没有插槽的情况 Vue2.x 插槽 有插槽的情况 具名插槽 没有slot属性 插槽简单实例应用 作用域插槽 ( 2.1.0 新增 ) Vue3.x 插槽 插槽 作用域插槽 没有插槽的情况 <div id="app"> <child> <span>1111</span> </child> </div> <script> // 注册子组件 Vue.component("child"

  • jQuery旋转插件jqueryrotate用法详解

    本文实例讲述了jQuery旋转插件jqueryrotate用法.分享给大家供大家参考,具体如下: CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(filter),但不全面,而且效果和性能都不好. 今天介绍一款 jQuery 插件--jqueryrotate,它可以实现旋转效果.jqueryrotate 支持所有主流浏览器,包括 IE6.如果你想在低版本

  • jQuery表格插件datatables用法详解

    jQuery表格插件datatables用法详解

    一.Datatables简介 DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格.主要特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持隐藏列 易用 可扩展性和灵活性 国际化 动态创建表格 免费的 二.如何使用 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTables插件来帮助我

  • jQuery日历插件datepicker用法详解

    jQuery日历插件datepicker用法详解

    jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件. 一般MIS系统的前端,尤其是用户注册页面,都会有诸如"出身年月"的日期输入框,最简单的做法就是使用一个<input type="text"/>标签,这样做的弊端有很多:首先是与数据库字段类型的匹配.其次是输入日期的合法性如"13月"或者闰年等等问题,如果深入下

随机推荐