首页 > 编程语言 >JavaScript - JsBarcode条形码

JavaScript - JsBarcode条形码

时间:2023-08-07 22:15:42浏览次数:43  
标签:条形码 barcode JsBarcode img JavaScript 设置 wstong 文本

<!DOCTYPE html>
<html>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jQuery.print/1.6.2/jQuery.print.min.js"></script>
    <div id="print_content">
        <img id="barcode"></img>
        <br>姓名: 张三<br>身份证: 44044019990217444X<br>
    </div>
    <button id="print">打印</button>

    <script>
        $('#print').click(function(){
            JsBarcode("#barcode", '44044019990217444X|' + encodeURIComponent('张三'), {
                format: "CODE128",//选择要使用的条形码类型
                width: 3,  //设置条之间的宽度
                height: 100,  // 高度
                displayValue: true,  // 是否在条形码下方显示文字
                text: "wstong",  // 覆盖显示的文本
                fontOptions: "bold italic",  // 使文字加粗体或变斜体
                font: "fantasy",  // 设置文本的字体
                textAlign: "right",  // 设置文本的水平对齐方式
                textPosition: "top",  // 设置文本的垂直位置
                textMargin: 5,  // 设置条形码和文本之间的间距
                fontSize: 15,  // 设置文本的大小
                background: "#a5cfd5",  // 设置条形码的背景
                lineColor: "#000000",//设置条和文本的颜色。
                margin: 15  // 设置条形码周围的空白边距
            });
            $('#print_content').print();

            // 界面不生成条形码打印
            // const img = document.createElement('img');
            // img.innerHTML = '';
            // img.id = 'wstong_barcode'
            // document.body.appendChild(img);
            // JsBarcode("#wstong_barcode", '44044019990217444X|' + encodeURIComponent('张三'), {
            //     format: "CODE128",//选择要使用的条形码类型
            //     width: 3,  //设置条之间的宽度
            //     height: 100,  // 高度
            //     displayValue: true,  // 是否在条形码下方显示文字
            //     text: "wstong",  // 覆盖显示的文本
            //     fontOptions: "bold italic",  // 使文字加粗体或变斜体
            //     font: "fantasy",  // 设置文本的字体
            //     textAlign: "right",  // 设置文本的水平对齐方式
            //     textPosition: "top",  // 设置文本的垂直位置
            //     textMargin: 5,  // 设置条形码和文本之间的间距
            //     fontSize: 15,  // 设置文本的大小
            //     background: "#a5cfd5",  // 设置条形码的背景
            //     lineColor: "#000000",//设置条和文本的颜色。
            //     margin: 15  // 设置条形码周围的空白边距
            // });
            // var barcSrc = $("img[id='wstong_barcode']")[0]['src']
            // $("img[id='wstong_barcode']").remove();
            // var tmp = '<div><img id="barcode_img" src="'+barcSrc+'"><br>姓名: 张三<br>身份证: 44044019990217444X<br></div>'
            // $(tmp).print();
        })
    </script>
</html>

image

标签:条形码,barcode,JsBarcode,img,JavaScript,设置,wstong,文本
From: https://www.cnblogs.com/wstong2052/p/17612848.html

相关文章

  • 【JavaScript21】关于Storage
    本地存储.存储在浏览器端的数据.可以理解成一个小型的非关系型数据库.localStorage和sessionStorage这俩玩意使用上是一样的.区别在于.一个是永久存储一个是临时存储.localStorage永久存储sessionStorage临时存储,浏览器关闭后.数据就没了.document.cookie也......
  • 【JavaScript20】箭头函数
    箭头函数没有自己的this,arguments,super或new.target。箭头函数适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。1、基本语法//(param1,param2,...,paramN)=>{statements}(param1,param2,...,paramN)=>expression//相当于:(param1,param2,...,paramN)=......
  • 【JavaScript19】解构赋值
    JavaScriptES6新增解构赋值,可以快读从数组或对象中取出成员。解构:将对象或者数组中的某个成员取出来;赋值:取出来的成员按顺序赋值给变量。数组的解构赋值使用中括号[]来进行解构数组,需注意变量名称和数组的值一一对应;或者把数组设置为一个变量,再解构let[a,......
  • 深入探索JavaScript的魅力与奇妙之处
    大家好!今天我想分享一些关于JavaScript(简称JS)的思考和体会。作为前端开发中最重要的语言之一,JS不仅具备强大的功能,还有着许多令人着迷的特性。首先,JavaScript的灵活性是其最引人注目的特点之一。它允许我们以多种方式解决问题,无论是面向对象编程、函数式编程还是响应式编程,JS都能......
  • 异步请求返回处理之finally的用途,代码规范摸索【玩转JavaScript】
    前言最近在改动老代码时,发现了一个有趣的现象。对于异步请求返回结果处理中,使用finally做兜底处理,不同的页面并不统一,也就是有的页面使用了,有的页面没使用,没使用的页面增加了额外的失败的处理。所以finally到底要不要统一?本着代码规范化原则的思维,我准备一探究竟。文章速度finally......
  • 【JavaScript17】eval函数
    eval本身在js里面正常情况下使用的并不多.但是很多网站会利用eval的特性来完成反爬操作.我们来看看eval是个什么鬼?从功能上讲,eval非常简单.它和python里面的eval是一样的.它可以动态的把字符串当成js代码进行运行.vars="1+2+3+4+5+6+7+8";varc=eval(s);//帮你......
  • 【JavaScript16】定时器
    在JS中,有两种设置定时器的方案1、setTimeout//语法规则t=setTimeout(函数,时间)//经过xxx时间后,执行xxx函数//m是第几个定时器varm=setTimeout(function(){console.log("我叫xwl");},5000);//单位是毫秒console.log("正常执行的....");......
  • 【JavaScript15】闭包
    什么是闭包闭包(closure)是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰,即形成一个不销毁的栈环境。闭包的特性:函数嵌套函数内部函数可以访问外部函数的变量参数和变量不会被回收。为什么要有闭包?1、先来看一段代码发现没有......
  • 【JavaScript14】函数基础
    函数定义函数定义的方法有多种,主要分为函数声明和函数表达式//函数声明functionfunc(arg1,arg2){console.log("arg1=",arg1);console.log("arg2=",arg2);return"返回一些东西"}varret=func("苹果","鸭梨");console.log(......
  • 【JavaScript11】正则表达式 RegExp对象
    定义正则表达式(英语:RegularExpression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。创建RexExp对象有两种方式创建RexExp对象第一种:使用字面量创建RegExp对象的语法:第......