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. py_正则表达式练习

    正则表达式: #正则表达式 #键盘数字6上的符号,^表示行的开始,$ 表示行的结束 #test = "tm queal Tomorrow Moon" ''' ^tm #匹配tm开头 ...

  2. PyTorch入门-CIFAR10图像分类

    CIFAR10数据集下载 CIFAR10数据集包含10个类别,图像尺寸为 3×32×32 官方下载地址很慢,这里给一个百度云: https://pan.baidu.com/s/1oTvW8wNa-VO ...

  3. laravel在视图中使用类似于“__PUBLIC__”,“__UPLOADS__”的操作

    首先在config文件夹下建立static.php文件 然后在里面定义常量 例: <?php define('__PUBLIC__', '/'); define('__UPLOADS__', ' ...

  4. NGUI List优化

    腾讯是如何做 Unity 手游性能优化的 https://juejin.im/entry/5774af485bbb50005925a3b1 Unity - NGUI - 优化ScrollView的一些 ...

  5. 【C#】静态构造方法与静态变量

    扯下闲篇先,本来今天预计整理下委托.事件.Lamada的笔记,然后再把单例模式的懒汉.饿汉模式看完. 在看到懒汉的双重加锁设计时,向同桌贩卖了下该设计的优点,结果反被同桌的一个问题难倒了~! 一. 有 ...

  6. 剑指 Offer 55 - II. 平衡二叉树

    题目描述 输入一棵二叉树的根节点,判断该树是不是平衡二叉树.如果某二叉树中任意节点的左右子树的深度相差不超过1,那么它就是一棵平衡二叉树. 示例1: 给定二叉树 [3,9,20,null,null,1 ...

  7. Istio 运维实战系列（1）：应用容器对 Envoy Sidecar 的启动依赖问题

    本系列文章将介绍用户从 Spring Cloud,Dubbo 等传统微服务框架迁移到 Istio 服务网格时的一些经验,以及在使用 Istio 过程中可能遇到的一些常见问题的解决方法. 故障现象 该问 ...

  8. leetcode刷题-70爬楼梯

    题目 假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 思路 最开始使用的是回溯的方法,但是时间效 ...

  9. 教你一招Linux下文本比对方法

    我们在写代码的过程中,免不了会对代码进行一些修修改改.但经常会出现改着改着,就不知道改完后与源文件的差异是怎样的.这里,我们就需要一个文本比对工具来进行文本比对. 有经验的程序员都知道,Windows ...

  10. STL-Deque（双端队列）与单调队列的实现

    前言: STl是个好东西,虽然他在不开O2的条件下会跑的很慢,但他着实会让你的代码可读性大大提高,令你的代码看起来既简单又整洁. 双端队列: 顾名思义,双端队列是有两个头的,一个队首指针,一个队尾指针 ...