基于jsbarcode 生成条形码并将生成的条码保存至本地+源码

2024-09-28 13:19:36

引言

JsBarcode是一个用JavaScript编写的条形码生成器。它支持多种条形码格式，可在浏览器和Node.js中使用。如果你在项目中使用了jquery也可以使用jquery，但它不是依赖项。

导读

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

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/10dEIgH6jwBL-0bAeRWxW4A

提取码: ena4

到此这篇关于基于jsbarcode 生成条形码并将生成的条码保存至本地+源码的文章就介绍到这了,更多相关jsbarcode 生成条形码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】

本文实例讲述了JS条形码插件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 Cod
BarCode条形码基于C# GDI+ 的实现方法详解

条形码在生活中的应用非常广泛,具体的条形码知识大家自行百度,了解条形码知识对理解下面的代码是必要的.如果只是应用的话,直接拿去就可以用了.废话不多说,上代码复制代码代码如下: public Bitmap GetCode39(string sourceCode) { int leftMargin = 5; int topMargin = 0; int thickLength = 2;
Node.js 条形码识别程序构建思路详解

在这篇文章中,我们将展示一个非常简单的方法构建一个自定义的 Node 模块,该模块封装了Dynamsoft Barcode Reader SDK ,支持 Windows.Linux 和 OS X,同时我们将演示如何集成这块模块实现一个在线的条形码读取应用. 越来越多的 Web 开发者选择 Node 来构建网站,因为使用 JavaScript 来开发复杂的服务器端 Web 应用越来越便利.为了扩展在不同平台下的 Node 的功能,Node 允许开发者使用 C/C++ 来创建扩展. 介绍 Dynam
JS生成一维码(条形码)功能示例

本文实例讲述了JS生成一维码(条形码)功能的方法.分享给大家供大家参考,具体如下: 1.js代码: (function() { if (!exports) var exports = window; var BARS = [212222,222122,222221,121223,121322,131222,122213,122312,132212,221213,221312,231212,112232,122132,122231,113222,123122,123221,223211,22113
使用JavaScript根据图片获取条形码的方法

最近在弄一个零售超市的项目,但是苦于需要自己录入数据,超市少的也有1000多种商品,自己一个一个录入肯定不太现实,所以考虑扫描商品的条形码,根据条形码获取商品的信息这样效率就高多了. 根据条形码获取商品信息这个在网上有很多api一般都是付费的费用不高,可以直接拿来用,这里就略过了. 这里重点说说JavaScript识别图片中的条形码. 开源库quaggaJS 项目地址:https://github.com/serratus/quaggaJS 这里要感谢大神提供这么牛B的js库,让我的想法得以实现
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码

引言 JsBarcode是一个用JavaScript编写的条形码生成器.它支持多种条形码格式,可在浏览器和Node.js中使用.如果你在项目中使用了jquery也可以使用jquery,但它不是依赖项. 导读以前生成条码都是外网网站上生成,因生产环境在内网中,上不了外网,只能在项目中生成相应规则,故将此方法整理下来. html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &
PHP生成各种随机验证码的方法总结【附demo源码】

本文实例总结了PHP生成各种随机验证码的方法.分享给大家供大家参考,具体如下: 验证码在WEB应用中非常重要,通常用来防止用户恶意提交表单,如恶意注册和登录.论坛恶意灌水等.本文将通过实例讲解使用PHP生成各种常见的验证码包括数字验证码.数字+字母验证码.中文验证码.算术验证码等等以及其Ajax验证过程. 点击此处本站下载示例源码. PHP生成验证码图片 PHP生成验证码的原理:使用PHP的GD库,生成一张带验证码的图片,并将验证码保存在Session中.PHP生成验证码的大致流程有: 1.产生
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载

基于jQuery鼠标点击水波动画竖直导航代码.这是一款基于jQuery+CSS3实现的带动画效果的竖直导航栏特效.效果图如下: 效果展示源码下载 html代码: <div class="nav"> <ul> <li><a>网站首页</a></li> <li><a>关于我们</a></li> <li><a>产品中心</a>&l
Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)

本文实例讲述了Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果的方法.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Text; using System.IO; public partial
jsp基于XML实现用户登录与注册的实例解析（附源码）

简单的基于xml做数据库的登录与注册主题介绍: 1.xml的读取和存储,主要是用到dom4j技术,(网络中的文件存储路径采用classLoader) 文件的读取和存储,写了一个工厂类 public class DocumentFactory { private static Document dom=null;//需要共享一个dom,所以需要设置为static private static String name="user.xml"; private static String f
Android基于TCP和URL协议的网络编程示例【附demo源码下载】

本文实例讲述了Android基于TCP和URL协议的网络编程.分享给大家供大家参考,具体如下: 手机本身是作为手机终端使用的,因此它的计算能力,存储能力都是有限的.它的主要优势是携带方便,可以随时打开,而且手机通常总是处于联网状态.因此网络支持对于手机应用非常重要. Android完全支持JDK本身的TCP,UDP网络通信API,也可以使用ServerSocket,Socket来建立基于TCP/IP协议的网络通信,也可以使用DatagramSocket,Datagrampacket来建立基于UD
基于jquery实现可定制的web在线富文本编辑器附源码下载

今天给大家介绍一款非常棒的WEB在线富文本编辑器--UMeditor,它是由百度web前端研发部开发所见即所得富文本web编辑器UEditor演变的迷你版编辑器,具有轻量,可定制,注重用户体验等特点,允许自由使用和修改代码,适用于前台快速简单回复框或后台内容编辑器. 在线预览源码下载如何使用? 建立一个demo.html文件,首先在需要添加编辑器的地方加入以下代码,使用style可以设置编辑器的宽度和高度. <script type="text/plain" id=&
使用maven打包生成doc文档和打包源码

maven打包生成doc文档和打包源码在pom.xml中加入如下插件 <build> <plugins>  <plugin> <groupId>or下g.apache.maven.plugins</groupId> <artifactId>maven-javadoc-plugin</artifactId> <version>2.7</version> <
PHP生成二维码与识别二维码的方法详解【附源码下载】

本文实例讲述了PHP生成二维码与识别二维码的方法.分享给大家供大家参考,具体如下: 二维码的分类线性堆叠式二维码矩阵式二维码二维码的优缺点优点信息容量大编码范围广容错能力强译码可靠性高可引入加密措施成本低,易制作缺点二维码技术成为手机病毒.钓鱼网站传播的新渠道信息泄密目前流行的三大国际标准 PDF417:不支持中文 DM:专利未公开,需支付专利费用 QR CODE:专利公开,支持中文 QR CODE 纠错能力 L级:约可纠错7%的数据码字 M级:约可纠错15%的数据码
Springboot基于Redisson实现Redis分布式可重入锁源码解析

目录一.前言二.为什么使用Redisson 1.我们打开官网 2.我们可以看到官方让我们去使用其他 3.打开官方推荐 4.找到文档三.Springboot整合Redisson 1.导入依赖 2.以官网为例查看如何配置 3.编写配置类 4.官网测试加锁例子 5.根据官网简单Controller接口编写 6.测试四.lock.lock()源码分析 1.打开RedissonLock实现类 2.找到实现方法 3.按住Ctrl进去lock方法 4.进去尝试获取锁方法 5.查看tryLockInne

基于jsbarcode 生成条形码并将生成的条码保存至本地+源码

相关推荐

随机推荐