介绍一下在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

代码

  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta charset="utf-8" />
  5.   <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
  6.   <title></title>
  7.   <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  8.   <script type="text/javascript" src="js/JsBarcode.all.js"></script>
  9.  </head>
  10.  <body>
  11.   <svg id="svgcode"></svg>
  12.   <!-- or -->
  13.   <canvas id="canvascode"></canvas>
  14.   <!-- or -->
  15.   <img id="imgcode" />
  16.   <script>
  17.         $("#svgcode").JsBarcode('Hi!');//or JsBarcode("#svgcode", "Hi!");  
  18.  
  19.         $("#canvascode").JsBarcode('Hello world!');//or JsBarcode("#canvascode", "Hello world!");  
  20.  
  21.         $("#imgcode").JsBarcode("I'm huangenai!");//or JsBarcode("#imgcode", "I'm huangenai!");  
      </script> 
     </body>
    </html>

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

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

条形码--JsBarcode的更多相关文章

  1. 前端如何生成条形码---JsBarcode

    React 生成条形码代码 注:需引入 jsbarcode 插件 import React from 'react'; import JsBarcode from 'jsbarcode'; class ...

  2. 生成条形码插件 条形码--JsBarcode

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE128 ...

  3. js生成条形码——JsBarcode

    原文地址:https://www.cnblogs.com/huangenai/p/6347607.html 介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE12 ...

  4. Vue 生成条形码 jsbarcode的使用

    安装依赖包 npm install jsbarcode --save 在使用页面引入依赖包 import JsBarcode from 'jsbarcode' 定义img标签和id <img i ...

  5. react 中使用 JsBarcode 显示条形码

    import React from 'react';import JsBarcode from 'jsbarcode'; export class RefundSheet extends React. ...

  6. JS 条形码插件--JsBarcode 在小程序中使用

    在小程序中的使用: utils文件夹下 barcode.js 粘粘以下代码 var CHAR_TILDE = 126 var CODE_FNC1 = 102 var SET_STARTA = 103 ...

  7. js自动生成条形码插件-JsBarcode

    JsBarcode.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. 使用js生成二维码和条形码

    1.生成二维码 使用github开源项目qrcode. 1.引入方式一(js cdn引入): ①.引入qrcode cdn: 自行下载..没有合适的cdn,地址 <script src=&quo ...

  9. js生成条形码插件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. windows服务器下IIS7 安装URL Rewrite（URL重写）模块

    URL Rewrite Module是一个基于规则的URL重写引擎,用于在URL被Web服务器处理之前改变请求的URL.对于动态Web应用程序,它可以为用户和seo/seo.html" ta ...

  2. 方法的标签_With携带

    方法中参数的标签: 标签的由来:1.标签也是方法名的一部分:2.为了提高程序的阅读性:OC方法允许我们给每个参数添加一个标签来说明当前参数的含义: 标签的作用:标签是为了标识变量的,因此标签名和变量名 ...

  3. Apache处理请求步骤及过程

    Apache请求处理循环详解 : 1.Post-Read-Request阶段: 在正常请求处理流程中,这是模块可以插入钩子的第一个阶段.对于那些想很早进入处理请求的模块来说,这个阶段可以被利用. 2. ...

  4. (简单) POJ 1502 MPI Maelstrom，Dijkstra。

    Description BIT has recently taken delivery of their new supercomputer, a 32 processor Apollo Odysse ...

  5. NYoj1058

    水题,dfs,裸的,本来这道题没什么好写的,只是第一次写的代码慢的出奇,纪念一下那个奇怪的思路 链接:http://acm.nyist.net/JudgeOnline/problem.php?pid= ...

  6. 位图文件（BMP）格式以及Linux下C程序实现（转）

    源:位图文件(BMP)格式以及Linux下C程序实现 说到图片,位图(Bitmap)当然是最简单的,它是Windows显示图片的基本格式,其文件扩展名为*.BMP.由于没有经过任何的压缩,故BMP图 ...

  7. MYSQL-group_concat设置group_concat_max_len

    MySQL提供的group_concat函数可以拼接某个字段值成字符串,如 select group_concat(user_name) from sys_user,默认的分隔符是 逗号,即" ...

  8. iOS开发 missing iOS distribution signing identity for 。。。

    苹果真是不让人省心,新年一来上传APP,就出现Missing iOS Distribution signing indetity for xxx 于是就把证书删了做,做了删了再重做,还是不行 百度了一 ...

  9. Linux开发IDE打造

    一直以来都是在windows下做开发的,微软提供的IDE  vs开发起来确实快捷高效,接触linux也很久了通常都是使用vim进行一些基础文件的编译,现在突然要转到linux做开发还是不太适应的,网上 ...

  10. 从CK+库提取标记点信息

    1.CK+动态表情库介绍 The Extended Cohn-Kanade Dataset(CK+) 下载地址 这个数据库是在 Cohn-Kanade Dataset 的基础上扩展来的,发布于2010 ...