基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
引言
JsBarcode是一个用JavaScript编写的条形码生成器。它支持多种条形码格式，可在浏览器和Node.js中使用。如果你在项目中使用了jquery也可以使用jquery，但它不是依赖项。
导读
以前生成条码都是外网网站上生成，因生产环境在内网中，上不了外网，只能在项目中生成相应规则，故将此方法整理下来。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<script src="/Static/imgupload/004447/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
更多精彩内容其他人还在看
理解Javascript闭包
闭包是ECMAScript一个很重要的特征，但是却很难用合适的定义来描述它。虽然闭包很难清晰地描述，但是，却很容易创建，或者说，不小心创建。然而，闭包的存在其实是有一定的潜在问题的。为了避免“不小心”地创建闭包，以及更好地利用闭包的优点，有必要理解闭包的机制。闭包的定义 ... 查看详情
收藏 0赞 0分享
JS实现切换标签页效果实例代码
在网页<head>区添加以下代码复制代码 代码如下:<style type="text/css"> <!-- BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-S... 查看详情
收藏 0赞 0分享
js将json格式内容转换成对象的方法
复制代码 代码如下:{"options":"[{\"text\":\"王家湾\",\"value\":\"9\"},{\"text\":\"李家湾\",\"valu e\":\"10\"},{\"text\":\"邵家湾\",\"value\":\"13\"}]"}
<... 查看详情
收藏 0赞 0分享
jQuery Mobile 导航栏代码
导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。
默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）。
使用 data-role="navbar" 属性来定义导航栏：复制代码 代码如下:<div data-role="he... 查看详情
收藏 0赞 0分享
基于jquery插件实现常见的幻灯片效果
在网站中使用幻灯片效果的目前很普遍，如何实现，自己经过一番研究，本以为很复杂，想不到却很简单。有现成的jquery插件jquery.KinSlideshow.js。 使用jquery.KinSlideshow.js就可以很轻松的实现幻灯片效果 htm代码： 复制代码 代码如下: ... 查看详情
收藏 0赞 0分享
多种方法实现JS动态添加事件
方法一、setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript:alert('测试');"); 但是IE不支持用 setAttribute 设置某... 查看详情
收藏 0赞 0分享
JS实现拖动示例代码
getBoundingClientRect() 来获取页面元素的位置 复制代码 代码如下: document.documentElement.getBoundingClientRect 该方法返回一个对象，从而获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，即分别代... 查看详情
收藏 0赞 0分享
JS滚轮事件onmousewheel使用介绍
典型的应用时鼠标滚轮滚动控制图片或者文字的大小，例如此类的转动鼠标滚轮实现缩放等等交互效果中，会用到 Mousewheel 事件。在大多数浏览器（IE6, IE7, IE8, Opera 10+, Safari 5+）中，都提供了 “mousewheel” 事件。滚轮事件的兼容性... 查看详情
收藏 0赞 0分享
框架页面高度自动刷新的Javascript脚本
实现原理：加载index.htm时候，每隔1秒钟自动调用脚本刷新框架页面代码 代码优点：只需要设置index.html框架页面中的脚本，调用加载的子页面中不需要设置任何代码。 index.htm代码如下： 复制代码 代码如下: <!DOCTYPE html PUBLIC "... 查看详情
收藏 0赞 0分享