介绍一下在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. html如何生成条形码,前端如何生成条形码---JsBarcode

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

  2. vue 条形码--JsBarcode

    介绍一下在GitHub生成条形码的js插件→JsBarcode npm install jsbarcode npm install canvas var JsBarcode = require('js ...

  3. 条形码--JsBarcode(银联二维码用过)

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

  4. vue中生成条形码(jsbarcode)、二维码(qrcodejs2)

    1.条形码插件jsbarcode 安装:npm install jsbarcode --save 引入:在需要生成条形码的页面引入即可 import JsBarcode from 'jsbarcode ...

  5. vue3.0 + JsBarcode 循环生成多个条形码(setup语法糖)

    1.安装jsbarcode npm install jsbarcode --save 2.html页面循环数据 //id动态绑定,使用类名加index <div class='js_barcod ...

  6. JsBarcode:JS条形码生成

    Jquery 下载地址:http://www.jq22.com/jquery-info122 JsBarcode 下载地址:http://www.jq22.com/jquery-info15657 & ...

  7. JS生成条形码/二维码 barcode.js、JsBarcode

    JS生成条形码/二维码 barcode.JsBarcode JsBarcode Barcode.js 以下代码均非纯原创.新手小白.网上一搜一大把的概念也不写了,直接上可运行的代码及遇到的小坑. Js ...

  8. vue 项目中生成条形码(jsbarcode)

    条形码插件介绍和使用 安装: cnpm install jsbarcode --save 引入:在要生成条形码的页面引入即可 import JsBarcode from 'jsbarcode' 3.二 ...

  9. 使用JsBarcode生成条形码

    引入jquery和JsBarcode.all.js(注意:引入JsBarcode.js无效) github地址:https://github.com/lindell/JsBarcode 代码: < ...

最新文章

  1. 2015计算机二级java真题_2015年计算机二级《JAVA》章节习题及答案(9)
  2. 增强学习--蒙特卡洛方法
  3. mysql 数据操作 多表查询 子查询 带比较运算符的子查询
  4. 详解jdbcTemplate和namedParameterJdbcTemplate
  5. TCP/IP与OSI的特征对比总结
  6. bit, byte, KB, GB, TB, PB, EB, ZB, YB, BB, NB, DB, CB, XB
  7. 图解《金字塔原理》,7步掌握其精华!
  8. 养老院智能健康手环开发/功能/特点/结构/原理
  9. since作为连词引导时间状语从句的用法
  10. 土豆网(第三方网站)使用qq登录的步骤和原理------oAuth协议
  11. 强收红包漫天要价偷转黑车……滴滴网约车被指太任性
  12. 输出满足某种条件的素数(C语言)
  13. 透过J2Cache的吐槽,领悟代码的设计
  14. 如何在安卓上android studio上构建本地服务器
  15. mysql 充值表设计_如何设计充值消费的数据表
  16. 盒子模型(CSS重点)
  17. 烘焙门店 | 解锁公众号精准引流5W+的流量密码
  18. saveOrUpdate Transaction silently rolled back because it has been marked as rollback-only
  19. 证券公司信用风险管理体系—以平安证券为例-课后检验-满分
  20. hbw-utils - 基本数据类型进制转换的实现

热门文章

  1. SpringBoot的Web开发入门案例1
  2. 感知机(perceptron):原理、python实现及sklearn.linear_model.Perceptron参数详解
  3. mysql mklink_挂载与链接(assign与mklink)——Windows 7的磁盘分区规划 | 学步园
  4. Android 自带浏览器谷歌账号自动登录的实现
  5. redis有序集合键(数据结构篇)
  6. 数据交换平台的架构设计
  7. 小学英语计算机融合课说课稿,信息技术与小学英语整合教学说课稿 |参考教案_小学英语教案及说课稿,小学信息技术说课稿...
  8. for /f命令之—Delims和Tokens用法总结
  9. 从ipad远程计算机步骤,如何使用iPhone/iPad远程访问计算机
  10. 【英语】大学英语CET考试,词汇语法50h+(导学方法论,词汇3关键,语法3大山)