介绍一下在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 huangenai!");  
  </script> 
 </body>
</html>

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

  <img id="imgcode" />

  <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

条形码--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. windows2003 IIS6 部署MVC3和MVC4程序

    1.服务器上安装SP2 和 IIS6 2.安装.Net Framework3.5 SP1(完整安装包,包含2.0 2.0SP1,237MB那个安装包) 3.安装.Net Framework4.0 4. ...

  2. struts2-----新建项目

    1. 建立界面原型 2. 建立Struts.xml 确定namespace, package, action, 空方法, result, 界面原型修改, 匹配现有设置, 测试, 做好规划 3. 建立数 ...

  3. Hibernate---第一个helloworld程序 (XML版本, annotation版本)

    Hibernate作为JPA的一种实现,jpa的注解已经是hibernate的核心,hibernate只提供了一些补充,而不是两套注解.hibernate对jpa的支持够足量,在使用hibernate ...

  4. 控制流（swift）

    检测API是否可用 if #available(iOS 9, OSX 10.10, *) { // 在 iOS 使用 iOS 9 APIs , 并且在 OS X 使用 OS X v10.10 APIs ...

  5. [SQLite]SQL语法

    SQLite常用SQL语句 创建表格 sql="CREATE TABLE IF NOT EXISTS MusicList (id integer primary key AutoIncrem ...

  6. Servlet实现文件上传（简单）（一）

     1..使用到的jar包,为apache的一个子项目  此commons-fileupload-1.2.2需要以下commons-io-2.0.1的支持   2.页面展示fileUpload.jsp ...

  7. lpc1768usb端点响应以及描述符定义

    #ifndef __USBEP1_H_ #define __USBEP1_H_ #include "usb.h" #include "usbhw.h" exte ...

  8. 在IOS应用中从竖屏模式强制转换为横屏模式

    http://www.cnblogs.com/mrhgw/archive/2012/07/18/2597218.html 在 iPhone 应用里,有时我们想强行把显示模式从纵屏改为横屏(反之亦然), ...

  9. js div截取字符串的长度

    <div style="width:100%;" id="changdu">这个是字符串的长度</div> $("#chang ...

  10. Linux怎样访问Windows共享文件和文件夹

    常常使用Windows的人可能会发现,Windows计算机之前共享资料非常方便,但是有时候想玩玩Linux的时候,如Fedora.Ubuntu.CentOS等,该怎样才能访问Windows计算机上的文 ...