条形码--JsBarcode
介绍一下在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的更多相关文章
- 前端如何生成条形码---JsBarcode
React 生成条形码代码 注:需引入 jsbarcode 插件 import React from 'react'; import JsBarcode from 'jsbarcode'; class ...
- 生成条形码插件 条形码--JsBarcode
每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE128 ...
- js生成条形码——JsBarcode
原文地址:https://www.cnblogs.com/huangenai/p/6347607.html 介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE12 ...
- Vue 生成条形码 jsbarcode的使用
安装依赖包 npm install jsbarcode --save 在使用页面引入依赖包 import JsBarcode from 'jsbarcode' 定义img标签和id <img i ...
- react 中使用 JsBarcode 显示条形码
import React from 'react';import JsBarcode from 'jsbarcode'; export class RefundSheet extends React. ...
- JS 条形码插件--JsBarcode 在小程序中使用
在小程序中的使用: utils文件夹下 barcode.js 粘粘以下代码 var CHAR_TILDE = 126 var CODE_FNC1 = 102 var SET_STARTA = 103 ...
- js自动生成条形码插件-JsBarcode
JsBarcode.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 使用js生成二维码和条形码
1.生成二维码 使用github开源项目qrcode. 1.引入方式一(js cdn引入): ①.引入qrcode cdn: 自行下载..没有合适的cdn,地址 <script src=&quo ...
- js生成条形码插件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 【BZOj 3670】【UOJ #5】【NOI 2014】动物园
http://www.lydsy.com/JudgeOnline/problem.php?id=3670 http://uoj.ac/problem/5 可以建出"KMP自动机"然 ...
- git 与 github基本使用
这里只对git 与 github的基本使用介绍,对于简单的步骤不做详细的说明,可以在网上搜索 一.git与github的安装与链接 1.git 安装:百度搜索"git",下载安装即 ...
- jvm内存设置及总结
http://dmouse.iteye.com/blog/1264118 jvm内存设置及总结 博客分类: java相关 Application情况: 大量使用了内存缓存,应用负载量较大,900w/d ...
- ACM录 之 常识和错误。
接下来说说一些ACM里面的常识和错误...(可能会比较乱) —— 首先ACM里面的代码都是要提交上去,然后让计算机自动判题的,所以...千万不要把 system("pause"); ...
- iOS之Xcode修改应用图标
随便找一个PNG为后缀的图标, 把它重命名为 icon.png 就可以了. 再次启动 IPhone 模拟器. 就成功了. 及时尺寸不符合审核规范,也是可以显示出来的,供测试效果吧. 为iPhone设 ...
- Quick Cocos2dx 场景转换问题
项目结构是这样子的: 主场景代码是这样子的: local MainScene = class("MainScene", function() return display.newS ...
- 安装PIL遇到的问题
配置:Win7 64位 不过折腾到最后,没有使用PIL,官方的PIL很久木有更新了,换了Pillow,是PIL的衍生吧,一直有更新,但是两者不可在同一环境共存. 1 Python version 2. ...
- jquery中:input和input的区别分析
:input表示选择表单中的input,select,textarea,button元素,input仅仅选择input元素. <html> <head> <style&g ...
- css 弹出框
最近想弄一个类似登陆框的那种弹出框,其实网上已经有很多例子,而且也有相应的插件,例如:jquery-ui的,可直接使用,而我就简单的弄了个简易版的登陆框,真的很简易. 其实原理就是设置两个div,一个 ...
- MySQL常用命令总结3
id SMALLINT UNSIGNED [AUTO_INCREMENT] PRIMARY KEY, //把id定义为主键且自动排号,每张数据表只有一个主键,不能为NULL,确保记录唯一性 //省略a ...