JsBarcode.html



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>js生成条形码插件</title>

    <script src="https://cdn.bootcss.com/jsbarcode/3.8.0/JsBarcode.all.min.js"></script>

    <style>

        * {margin: 0;padding: 0;box-sizing: border-box;}

        h3 {text-align: center;font-size: 16px;margin: 10px;}

        .box {text-align: center;}

        #barcode {width: 200px;}

        ul {padding: 5px;}

        li {list-style: none;padding: 5px 10px;font-size: 14px;line-height: 18px;}

        pre {font-size: 12px;}

    </style>

</head>

<body>

    <h3>js自动生成条形码插件-JsBarcode</h3>

    <div class="box">

        <img id="barcode" />

    </div>

    <ul>

        <li>npm官网地址：https://www.npmjs.com/package/jsbarcode</li>

        <li>github:https://github.com/lindell/JsBarcode</li>

        <li>使用说明：</li>

        <li>引入JsBarcode插件：JsBarcode.all.min.js</li>

        <li>可以访问：http://www.bootcdn.cn/jsbarcode/</li>

        <li>在HTML中放置img标签存放条形码的容器</li>

        <li>默认配置项</li>

        <li>

            <pre>

{

    width: 2,//较细处条形码的宽度

    height: 100, //条形码的宽度，无高度直接设置项，由位数决定

                 //也可以通过CSS去调整

    quite: 10,

    format: "CODE128",

    displayValue: false,//是否在条形码下方显示文字

    font:"monospace",

    textAlign:"center",

    fontSize: 12,

    background:"",

    lineColor:"#000"//条形码颜色

}

            </pre>

        </li>

    </ul>

</body>

<script>

    var barcode = document.getElementById('barcode'),

        str = "18612908099",

        options = {

            format: "CODE128",

            displayValue: true,

            fontSize: 18,

            height: 100

        };

    JsBarcode(barcode, str, options); //原生

    // $('#barcode').JsBarcode(string, options); //jQuery

</script>

</html>

js自动生成条形码插件-JsBarcode的更多相关文章

  1. js生成条形码插件

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

  2. 基于eclipse的mybatis映射代码自动生成的插件

    基于eclipse的mybatis映射代码自动生成的插件 分类: JAVA 数据库 工具相关2012-04-29 00:15 2157人阅读 评论(9) 收藏 举报 eclipsegeneratori ...

  3. 基于eclipse的mybatis映射代码自动生成的插件http://blog.csdn.net/fu9958/article/details/7521681

    基于eclipse的mybatis映射代码自动生成的插件 分类: JAVA 数据库 工具相关2012-04-29 00:15 2157人阅读 评论(9) 收藏 举报 eclipsegeneratori ...

  4. SpringBoot 添加mybatis generator 自动生成代码插件

    自动生成数据层代码,提高开发效率 1.pom添加插件,并指定配置文件路径 <!-- mybatis generator 自动生成代码插件 --> <plugin> <gr ...

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

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

  6. mybatis-generator自动生成代码插件

    mybatis自动生成代码(实体类.Dao接口等)是很成熟的了,就是使用mybatis-generator插件. 它是一个开源的插件,使用maven构建最好,可以很方便的执行 插件官方简介: http ...

  7. mybatis-generator自动生成代码插件使用详解

    mybatis-generator是一款在使用mybatis框架时,自动生成model,dao和mapper的工具,很大程度上减少了业务开发人员的手动编码时间,今天自己研究了一下,也分享一下使用心得供 ...

  8. 安卓自动生成代码插件－Android code Generator（转）

    编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识.前端.后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! 介绍 A ...

  9. python笔记 利用python 自动生成条形码 二维码

    1. ean13标准条形码 from pystrich.ean13 import EAN13Encoder encode = EAN13Encoder(') encode.save('d:/barco ...

随机推荐

  1. Sign in with Apple 流程总结

    流程图 相关说明 UserId 与用户的 Apple Id 一一对应.在同一个开发帐号下的所有 app 里,获取到的值都一样. IdentityToken identityToken 是一个 Json ...

  2. java爬取图片示例

    爬虫是什么 这里引用一下 wiki 中关于 网络爬虫的定义,相信大家看过后会有一个清晰的认识 网络爬虫(英语:web crawler),也叫网络蜘蛛(spider),是一种用来自动浏览万维网的网络机器 ...

  3. java23种设计模式——六、适配器模式

    @ 目录 介绍 应用场景 优缺点 模式实现 源码在我的github和gitee中获取 介绍 适配器模式(Adapter Pattern)是作为两个不兼容的接口之间的桥梁.这种类型的设计模式属于结构型模 ...

  4. secureCRT中sftp的使用

    securecrt 按下ALT+P就开启新的会话 进行ftp操作.输入:help命令,显示该FTP提供所有的命令pwd: 查询linux主机所在目录(也就是远程主机目录)lpwd: 查询本地目录(一般 ...

  5. 【java学习笔记】LongAdder

    目录 1.背景 2.LongAdder 3.Striped64内部结构 4.LongAdder的add方法解析 5.Striped64的longAccumulate方法解析 6.总结 LongAdde ...

  6. opencv 截图并保存

    opencv 截图并保存(转载) 代码功能:选择图像中矩形区,按S键截图并保存,Q键退出. #include<opencv2/opencv.hpp> #include<iostrea ...

  7. JVM基于栈的解释器执行原理

    通过下面这段代码来解释JVM基于栈的执行原理 4. public static int add(int a, int b) { 5. int c = 0; 6. c = a + b; 7. retur ...

  8. elementui table fixed错位

          目前在官方没有解决这个bug前如果有人碰到类似问题.建议大家监听table数据,每次数据得到或改变的时候去重新渲染一下 /* 监听table数据对象 */ watch: { tableDa ...

  9. DIY申请达姆施塔特工业大学计算机专业(Informatik)硕士(Master)【附个人简历和动机信】

    1.个人概况 双非院校本科毕业两年,已来德国一年. APS绩点2.5,均分80.17. 2020.6月考出5443德福成绩,7月中下旬递交材料,9月初获得Zulassung(录取) PS:后来考出54 ...

  10. 10.redis cluster介绍与gossip协议

    一.redis cluster 介绍 自动将数据进行分片,每个 master 上放一部分数据 提供内置的高可用支持,部分 master 不可用时,还是可以继续工作的 redis cluster架构下的 ...