原文地址：https://www.cnblogs.com/huangenai/p/6347607.html

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

js生成条形码——JsBarcode的更多相关文章

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

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

  2. js生成条形码插件

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

  3. 使用js生成条形码以及二维码

    一.用js生成条形码这种业务场景不是很常见的,最近刚好又接到这种需求 Google一下,发现github还真有这方面的轮子,感谢github,省去了我们很多造轮子的过程, 好了言归正传,首先引入jsb ...

  4. js生成条形码

    生成条形码 <body> <div> <img id="ma"/> </div> </body> </html&g ...

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

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

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

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

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

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

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

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

  9. 条形码--JsBarcode

    介绍一下在GitHub生成条形码的js插件→JsBarcode 支持的条形码: 条码支持的有: CODE128  CODE128 (自动模式切换)  CODE128 A/B/C (强制模式)EAN  ...

随机推荐

  1. Spring中AOP方式实现多数据源切换

    作者:suroot spring动态配置多数据源,即在大型应用中对数据进行切分,并且采用多个数据库实例进行管理,这样可以有效提高系统的水平伸缩性.而这样的方案就会不同于常见的单一数据实例的方案,这就要 ...

  2. IMP本质上是一个通用的函数指针

    IMP:通用的函数指针 /// A pointer to the function of a method implementation. #if !OBJC_OLD_DISPATCH_PROTOTY ...

  3. RabbitMQ简单介绍+Windows环境安装

    文章目录 1.RabbitMQ简介2.RabbitMQ与其他MQ有什么不同3.RabbitMQ环境安装3.1 安装erlang3.2 安装rabbitmq-server4. RabbitMQ管理平台介 ...

  4. Javascript的数据类型（原始类型和引用类型）

    1.ECMAScript3中定义了变量可分为原始值和引用值. 原始值:是保存在栈(stack)中的简单数据段:也就是说他们的值是直接存储在变量访问的位置. 引用值:是保存在堆(heap)中的对象,也就 ...

  5. loj2058 「TJOI / HEOI2016」求和 NTT

    loj2058 「TJOI / HEOI2016」求和 NTT 链接 loj 思路 \[S(i,j)=\frac{1}{j!}\sum\limits_{k=0}^{j}(-1)^{k}C_{j}^{k ...

  6. hive基础知识二

    1. Hive的分区表 1.1 hive的分区表的概念 在文件系统上建立文件夹,把表的数据放在不同文件夹下面,加快查询速度. 1.2 hive分区表的构建 创建一个分区字段的分区表 hive> ...

  7. Mongoose 内置 CURD 方 法、扩展 Mongoose Model 的静态方法和 实例方法

    Mongoose 内置 CURD 方 法 Mongoose 内置 CURD 方 法文档地址:https://mongoosejs.com/docs/queries.html 常用的方法如下: Mode ...

  8. Ubuntu 16.04 一系列软件安装命令，包括QQ、搜狗、Chrome、vlc、网易云音乐安装方法

    1 简介 Ubuntu 16.04安装完后,还需要做一些配置才能愉快的使用,包括添加软件源.安装搜狗输入法.Chrome浏览器.网易云音乐.配置快捷键.安装git等等,下面就跟着我来配置吧,just ...

  9. bash: ip: command not found

    Centos安装 # yum install iproute2 iproute2-doc Ubuntu安装 # apt-get install iproute2 iproute2-doc

  10. 五种IO模型

    参考文档 https://www.jianshu.com/p/486b0965c296 概念说明 用户空间和内核空间        现在操作系统都是采用虚拟存储器,那么对32位操作系统而言,它的寻址空 ...