介绍一下在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. 【supervisord】部署单进程服务的利器

    最近听了一场分享,里边同事介绍了一些python开发环境常用到的几种工具,其中之一就supervisord,分享后自己做了些功课,概括一下supervisord是一个什么东西呢 1. 它是一个独立的常 ...

  2. JQuery实现两侧浮动广告

    1.描述 两侧浮动显示广告 2.要点 其实就是一直在变浮动广告距顶部的值. 3.代码 <!DOCTYPE html> <html> <head> <meta ...

  3. Alcatraz：插件管理

    安装: 终端粘贴 "curl -fsSL https://raw.github.com/alcatraz/Alcatraz/master/Scripts/install.sh | sh&qu ...

  4. MQ-2烟雾传感器启动

    MQ-2气体传感器所使用的气敏材料是在清洁空气中电导率较低的二氧化锡(SnO2).当传感器所处环境中 存在可燃气体时,传感器的电导率随空气中可燃气体浓度的增加而增大.使用简单的电路即可将电导率的 变化 ...

  5. JRPC 轻量级RPC框架

    JRPC是一个轻量级的java RPC框架.它支持服务注册和发现. 目前它开源了,地址为:https://github.com/dinstone/jrpc. Quick Start step 1: g ...

  6. php包管理工具最基本的一些问题

    windows下的 1.先安装windows下的set-up程序 点击一步步的, cmd进入,输入composer能成功显示一幅图说明安装成功 2.在下载,https://getcomposer.or ...

  7. 写一篇 Bootstrap弹窗确认的文章。本周完成

    思路; 点击按钮,显示模态 点击确定,异步提交 根据结果,删除指定的记录

  8. [Angular Tutorial] 4 - Directory and File Organization

    在这一步中,我们将不会在我们的应用中添加任何新功能,相反,我们打算退回一步,重构我们的代码库,移动我们的代码和文件,以此来使我们的应用更具易扩展性和可维护性. 在先前的步骤中,我们已经见识到了如何将我 ...

  9. div垂直居中(js)

    window.onload = function(){ var xx = document.documentElement.clientHeight; // 470为要垂直居中的div的高度 he = ...

  10. OSG世界坐标转屏幕坐标（转载）

    OSG世界坐标转屏幕坐标 #define M(row,col) m[col * 4 + row] void Transform_Point(double out[4], const double m[ ...