介绍一下在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. PAT (Advanced Level) 1008. Elevator (20)

    简单模拟. 注意a[i]==a[i-1]的情况. #include<iostream> #include<cstring> #include<cmath> #inc ...

  2. Altera CYCLONE III FPGA BGA布线

    最近在做altera FPGA BGA相关的布线工作,收集了一些资料,公开出来以供大家讨论. 首先是器件引脚,只有弄清楚器件各个引脚的功能才能够进行布线,下面的文档详细描述了每个引脚的功能. 各引脚功 ...

  3. centos7中yum安装ntfs-3g

    CentOS默认源里没有ntfs3g,想要添加ntfs支持,无非是自己下载编译安装或者加源yum安装. 新安装了一个CentOS7,用的是添加aliyun的epel源来yum安装的方式,简单易行. 1 ...

  4. （译）Windsor入门教程---第三部分 编写第一个Installer

    原文:http://docs.castleproject.org/Windsor.Windsor-tutorial-ASP-NET-MVC-3-application-To-be-Seen.ashx ...

  5. input有许多，点击按钮使用form传递文本框的值

    input有许多,点击按钮使用form传递文本框的值 <form name="form1" method="post" action="< ...

  6. iOS 的三种自建证书方法https请求相关配置

    如果你的app服务端安装的是SLL颁发的CA,可以使用系统方法直接实现信任SSL证书,关于Apple对SSL证书的要求请参考:苹果官方文档CertKeyTrustProgGuide 这种方式不需要在B ...

  7. STM32的USART DMA传输（转）

    源:STM32的USART DMA传输 问题描述: 我有一个需求,AD采得一定数目的数据之后,由串口DMA发出,由于AD使用双缓冲,所以每次开始DMA的时候都需要重新设置开始的内存地址以及传输的数目( ...

  8. IOS NSURLRequest 设置 Header

    https://my.oschina.net/wolx/blog/406092 工程中的请求,需要设置Header,请求令牌才访问,NSURLRequest 请求没有直接设置header 的方法,需要 ...

  9. iOS纯代码制作欢迎界面——UIScrollView, UIPageControl, UIImageView,UIButton, NSTimer

    欢迎界面,还是比较简单的,一个UIScrollView控件,一个UIPageControl,几个UIImageView即可摆平.在这里光玩这些,就显得诚意不足了.特意拓展一下,再加几个UIButton ...

  10. Android和BLE模块连接通信

    首先,进行一下科普: 1.BLE(Bluetooth Low Energy),蓝牙4.0核心profile,主要特点是快速搜索,快速连接,超低功耗保持连接和数据传输,缺点:数据传输速率低,由于其具有低 ...