条形码--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 ...
随机推荐
- PAT 天梯赛 L2-1 紧急救援
Dijkstra算法扩展 题目链接 解题代码如下: #include<cstdio> #include<iostream> #include<algorithm> ...
- Ubuntu安装PHP时候出错--xml2-config not found
在Ubuntu下接着安装php时候,在configure后,又出现错误提示:error: xml2-config not found. Please check your libxml2 instal ...
- windows下 nginx php 环境搭建
windows下配置nginx+php环境 刚看到nginx这个词,我很好奇它的读法(engine x),我的直译是“引擎x”,一般引“擎代”表了性能,而“x”大多出现是表示“xtras(额外的效果) ...
- [iOS Animation]-CALayer 图像IO
图像IO 潜伏期值得思考 - 凯文 帕萨特 在第13章“高效绘图”中,我们研究了和Core Graphics绘图相关的性能问题,以及如何修复.和绘图性能相关紧密相关的是图像性能.在这一章中,我们将研究 ...
- MIPI-2
Mipi针对显示有一整套解决方案,首先,框图如下 可以看到,很像OSI七层参考模型,分为 应用层:像素处理以及像素包管理,处理一些比较高的协议, 协议层底层:用于对打包好的像素数据进行二次打包,包括对 ...
- [转]六款常用的linux C/C++ IDE
之前在windows下开发习惯啦,linux改用vim开发代码,但是前期还是不熟悉看代码效率感觉有点低.由于看代码需要各种跳转查找我个人觉得还是IDE方便些,以前在windows下就挺喜欢使用code ...
- Github上的600多个iOS开源类库
Github上的600多个iOS开源类库,入下图所示,里面有很多资源,学习积累的好资源 地址:http://github.ibireme.com/github/list/ios/
- html css基础(一)
1.HTML:做静态网页,是一种标签语言, HTML结构: 一个HTML文档由4个基本部分组成: ① 一个文档声明:<!DOCTYPE HTML> ② 一个html标签对:<html ...
- 在Eclipse中配置tomcat
为了在Eclipse中进行struts2的测试,才发现自己机器上的Eclipse没有集成Tomcat,在网上找了半天,不是这个插件没有下载地址,就是那个有好多注意事项或者版本问题. 结果,自己到tom ...
- ZOJ 1025 Wooden Sticks
题目大意:有n个木棍,分别具有长度li和重量wi.对于木棍s1和s2,若l1<=l2且w1<=w2,则s1.s2可构成单调递增序列.求n个木棍中这样序列的个数. 最先的想法是,先排序,然后 ...