<!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生成条形码插件的更多相关文章

  1. js自动生成条形码插件-JsBarcode

    JsBarcode.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. 使用js生成条形码以及二维码

    一.用js生成条形码这种业务场景不是很常见的,最近刚好又接到这种需求 Google一下,发现github还真有这方面的轮子,感谢github,省去了我们很多造轮子的过程, 好了言归正传,首先引入jsb ...

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

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

  4. js生成条形码——JsBarcode

    原文地址:https://www.cnblogs.com/huangenai/p/6347607.html 介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE12 ...

  5. js生成条形码

    生成条形码 <body> <div> <img id="ma"/> </div> </body> </html&g ...

  6. Barcode.js功能强大的条码生成jQuery插件

    本文转载自http://www.uedsc.com/barcode-js.html Barcode.js是一个基于jQuery库的插件,用于绘制条形码或者二维码,能够生成基于DIV+CSS或者Canv ...

  7. 使用js生成二维码和条形码

    1.生成二维码 使用github开源项目qrcode. 1.引入方式一(js cdn引入): ①.引入qrcode cdn: 自行下载..没有合适的cdn,地址 <script src=&quo ...

  8. js插件---在线类似excel生成图表插件解决方案

    js插件---在线类似excel生成图表插件解决方案 一.总结 一句话总结:google比百度好用多了,多用google google js editable table jquery 双向绑定 这种 ...

  9. 前端如何生成条形码---JsBarcode

    React 生成条形码代码 注:需引入 jsbarcode 插件 import React from 'react'; import JsBarcode from 'jsbarcode'; class ...

随机推荐

  1. Git之清除已保存的账户

    Git会自动保存输入过的用户名.密码. Git的配置文件是-/.gitconfig.可在windows下的GIt Bash.Mac的命令行中,用vim ~/.gitconfig打开. Windows ...

  2. 微信小程序开发——开发者工具无法输入中文的处理

    问题模块 框架类型 问题类型 操作系统 工具版本 开发者工具 小程序 Bug Windows v.02.1810290 异常描述: 无法输入中文,偶现,但是概率有点高,重启,重装,更新版本等等都未解决 ...

  3. vue使用日期时间插件layDate

    项目中需要用到日期时间插件,尝试用bootstrap.element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊.终于,最后用了layDate实现了需要的功能 最终效果: 使用步骤: 1. ...

  4. Java_4 引用类型变量 Scanner与Random的使用

    1.Scanner的使用 获得键盘输入的功能. 2.Random的使用 Random ran = new Random();//创建引用类型的变量 int number = ran.nextInt(1 ...

  5. 合并两个git仓库

    现有两个git仓库ekt_zy.ekt_zijian,需要把ekt_zijian项目中的代码合并到ekt_zy项目中. 1 将ekt_zijian作为远程仓库.添加到ekt_zy中,设置别名为ziji ...

  6. avalon子孙元素属性监听

    HTML正文: <body ms-controller="ex"> <div class="ms-hover" ms-click=" ...

  7. WebAPI传参

    1.GET请求传递参数 URL传参:http://localhost/ApiTest/test?id=1 API接收参数 [HttpGet] public string GetUser(int id) ...

  8. Pycharm使⽤用秘笈v0.3PyCharm使⽤用秘籍

    Pycharm使⽤用秘笈v0.3PyCharm使⽤用秘籍 1. PyCharm的基本使⽤用 在PyCharm下为你的Python项⽬目配置Python解释器器 1. Project:当前项⽬目名> ...

  9. django项目创建启动 ORM操作

    . HTTP协议消息的格式: . 请求(request) 请求方法 路径 HTTP/1.1\r\n k1:v1\r\n ...\r\n \r\n 请求体 <-- 可以有,可以没有 . 响应(re ...

  10. dev NavBarControl控件

    一.新建一个导航栏 拖入一个panel到窗口上做为导航栏的容器,然后再拖入一个NavBarControl到其上,点击NavBarControl控件的右上角三角箭头展开任务列表,选择PaintStyle ...