导读

　　以前生成条码都是外网网站上生成，因生产环境在内网中，上不了外网，只能在项目中生成相应规则，故将此方法整理下来。

html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>测试</title>

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

</head>

<body>

    <h1>hhhhhhhhhhhhhhhhhhhhhhh</h1>

    <div class="box">

        <img id="barcode" />

    </div>

    <input type="text" id="content" placeholder="请输入条码内容"/>

    <input type="button" id="autoIma" value="生成" onclick="CreateIma()"/>

    <input type="button" id="btnsavaImg" value="保存图片到本地" onclick="Download()" />

    <script>

        //生成条码

        function CreateIma() {

            var content = document.getElementById('content').value;

            if (content == undefined || content == "") {

                alert("请输入条码内容!");

                return;

            };

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

                //str = "chenyanbin",

                options = {

                    format: "CODE128",

                    displayValue: true,

                    fontSize: 18,

                    height: 100

                };

            JsBarcode(barcode, content, options); //原生JS方式

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

        }

        //将生成的条形码保存至本地

        function Download() {

            // 通过选择器获取img元素

            var img = document.getElementById('barcode')

            // 将图片的src属性作为URL地址

            var url = img.src

            var a = document.createElement('a')

            var event = new MouseEvent('click')

            a.download = name || '下载图片名称'

            a.href = url

            a.dispatchEvent(event) //根据A标签的属性来搞事情

        };

    </script>

</body>

</html>

不支持中文！！！！

效果

项目下载(附js插件)

链接：https://pan.baidu.com/s/1nKtP5GbaEvQRs9ttTtWdAw

提取码：7co8

jsbarcode 生成条形码，并将生成的条码保存至本地，附源码的更多相关文章

  1. 手把手教你基于SqlSugar4编写一个可视化代码生成器（生成实体，以SqlServer为例，文末附源码）

    在开发过程中免不了创建实体类,字段少的表可以手动编写,但是字段多还用手动创建的话不免有些浪费时间,假如一张表有100多个字段,手写有些不现实. 这时我们会借助一些工具,如:动软代码生成器.各种ORM框 ...

  2. 开源方案搭建可离线的精美矢量切片地图服务-8.mapbox 之sprite大图图标文件生成（附源码）

    项目成果展示(所有项目文件都在阿里云的共享云虚拟主机上,访问地图可以会有点慢,请多多包涵). 01:中国地图:http://test.sharegis.cn/mapbox/html/3china.ht ...

  3. 【C#附源码】数据库文档生成工具支持（Excel+Html）

    [2015] 很多时候,我们在生成数据库文档时,使用某些工具,可效果总不理想,不是内容不详细,就是表现效果一般般.很多还是word.html的.看着真是别扭.本人习惯用Excel,所以闲暇时,就简单的 ...

  4. C#使用Xamarin开发可移植移动应用进阶篇(8.打包生成安卓APK并精简大小),附源码

    前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 嗯,前面讲 ...

  5. 一个web图片热点生成工具（winform开发） 附源码

    给图片加热点是web开发中经常用到的一个功能.这方面的工具也不少. 为了更好的满足自己的需求,写了一个winform程序. 可以方便的给图片加热点,更方便灵活! 源码下载 http://downloa ...

  6. 【C#附源码】数据库文档生成工具支持（Excel+Htm）

    数据库文档生成工具是用C#开发的基于NPOI组件的小工具.软件源码大小不到10MB.支持生成Excel 和Html 两种文档形式.了解更多,请访问:http://www.oschina.net/cod ...

  7. JAVA WEB项目中生成验证码及验证实例（附源码及目录结构）

    [我是一个初学者,自己总结和网上搜索资料,代码是自己敲了一遍,亲测有效,现将所有的目录结构和代码贴出来分享给像我一样的初学者] 作用 验证码为全自动区分计算机和人类的图灵测试的缩写,是一种区分用户是计 ...

  8. 原创SQlServer数据库生成简单的说明文档小工具(附源码)

    这是一款简单的数据库文档生成工具,主要实现了SQlServer生成说明文档的小工具,目前不够完善,主要可以把数据库的表以及表的详细字段信息,导出到 Word中,可以方便开发人员了解数据库的信息或写技术 ...

  9. 原创SQlServer数据库生成简单的说明文档包含（存储过程、视图、数据库批量备份）小工具(附源码)

    这是一款简单的数据库文档生成工具,主要实现了SQlServer生成说明文档的小工具,目前不够完善,主要可以把数据库的表以及表的详细字段信息,导出到 Word中,可以方便开发人员了解数据库的信息或写技术 ...

  10. 使用Java生成word文档（附源码）

    当我们使用Java生成word文档时,通常首先会想到iText和POI,这是因为我们习惯了使用这两种方法操作Excel,自然而然的也想使用这种生成word文档.但是当我们需要动态生成word时,通常不 ...

随机推荐

  1. 智慧城市three.js数字孪生三维展示城市建筑轮廓数据获取方法分析和AI算法方案剖析

    一.目前世面上有的2种免费方案是 1.OpenStreetMap开源网站下载, 2.blender的gis插件获取城市建筑轮廓. 缺点是:只有重点城市和省会城市,一些地级市或者县级市基本没有数据. 二 ...

  2. .NET 代理模式（一）基本概念

    代理模式 代理模式,它是一种结构型的设计模式. 让你能够提供对象的替代品或其占位符. 代理控制着对于原对象的访问, 并允许在将请求提交给对象前后进行一些处理. 简单理解就是 客户端不会直接与实际实现类 ...

  3. Oracle批量插入和更新

    一.驱动.使用Oracle.ManagedDataAccess.Client 二.原理.利用OracleCommand的ArrayBindCount属性设置批量大小. 三.实现 函数使用的实体是efc ...

  4. apache 的下载与配置

    一,下载: 打开apache的官方网站,http://www.apache.org/   拉到网站的最下面,如图所示: 点击HTTP Server链接,对 Apache httpd 2.4.43 Re ...

  5. Win11安装VMware Workstation Pro,Centos,Xshell,Xftp（Linux学习需要）

    注意:1.win11不能安装太低版本的VMware Workstation Pro,否则启动linux会出现蓝屏 ​ 2.win11是默认没有开虚拟机平台支持的,所以同时也要开启,否则也会出现蓝屏. ...

  6. 我用docker搭建的第一个博客

    其实很早就听说了docker这个东西,一直以来想玩不知道拿什么下手,再加上前段时间听了一个思科的年度网络报告讲解里面稍微提了一下docker的优势以及网络即服务的概念.想通了,不是每一步都得亲历亲为, ...

  7. k8s——istio

    安装istio Istio / 入门 [root@master ~]# curl -L https://istio.io/downloadIstio | sh - % Total % Received ...

  8. 鸿蒙HarmonyOS实战-ArkTS语言基础类库（并发）

    一.并发 并发是指在一个时间段内,多个事件.任务或操作同时进行或者交替进行的方式.在计算机科学中,特指多个任务或程序同时执行的能力.并发可以提升系统的吞吐量.响应速度和资源利用率,并能更好地处理多用户 ...

  9. k8s节点状态Init:0/1

    k8s节点状态Init:0/1 在节点机器上打印日志: journalctl -f -u kubelet 出现以下内容: 5月 29 15:27:34 k8snode2 kubelet[2249]: ...

  10. 网络问题排查必备利器：Pingmesh

    背景 当今的数字化世界离不开无处不在的网络连接.无论是日常生活中的社交媒体.电子商务,还是企业级应用程序和云服务,我们对网络的依赖程度越来越高.然而,网络的可靠性和性能往往是一个复杂的问题,尤其是在具 ...