js条形码生成

最新推荐文章于 2023-11-14 11:40:12 发布

@LanCaiSheng

最新推荐文章于 2023-11-14 11:40:12 发布

阅读量879

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_43173759/article/details/121955596

版权

效果图
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="JsBarcode.all.min.js"></script>
</head>
<body>
    <div style="width:100%;">
        <table style="width: 800px; border-collapse: collapse; margin: 0px auto;margin-top:100px;" border="1" cellspacing="0" cellpadding="0">
            <tr style="background-image: linear-gradient(to right,#fff,#267cb7) ">
                <td colspan="4" style="height:100px;border:none">
                    <div style="text-align: center; height: 100px;line-height:100px; font-size:28px;">固定资产卡片</div>
                </td>
            </tr>
            <tr>
                <th style="width: 150px; line-height: 40px; height: 40px; text-align: right;"><span style="margin-right: 20px;">资产编号</span></th>
                <td style="text-align: left;"><span style="margin-left: 20px;">ZCSG-202108180001</span></td>
                <th style="width: 150px;text-align: right; "><span style="margin-right: 20px;">资产名称</span></th>
                <td style="text-align: left;"><span style="margin-left: 20px;">红木办公桌</span></td>
            </tr>
            <tr>
                <th style="width: 150px; line-height: 40px; height: 40px; text-align: right; "><span style="margin-right: 20px;">使用部门</span></th>
                <td style="text-align: left;"><span style="margin-left: 20px;">财务部</span></td>
                <th style="width: 150px; text-align: right; "><span style="margin-right: 20px; letter-spacing: 5.2px;">责任人</span></th>
                <td style="text-align: left;"><span style="margin-left: 20px;">路人甲</span></td>
            </tr>
            <tr>
                <td style="height: 80px" colspan="4"><img id="imgcode" /></td>
            </tr>
        </table>
    </div>
</body>
</html>
<script>
    //方式1
    //$("#imgcode").JsBarcode("ZCSG-202108180001");

    //方式2.0
    //JsBarcode("#imgcode", "ZCSG-202108180001");

    //方式2.1
    JsBarcode("#imgcode", "ZCSG-202108180001", {
        format: "CODE39",//选择要使用的条形码类型
        width: 3,//设置条之间的宽度
        height: 80,//高度
        displayValue: true,//是否在条形码下方显示文字
        text: " ",//覆盖显示的文本
        fontOptions: "bold italic",//使文字加粗体或变斜体
        font: "fantasy",//设置文本的字体
        textAlign: "left",//设置文本的水平对齐方式
        textPosition: "top",//设置文本的垂直位置
        textMargin: 5,//设置条形码和文本之间的间距
        fontSize: 15,//设置文本的大小
        background: "#000000",//设置条形码的背景
        lineColor: "red",//设置条和文本的颜色。
        margin: 15//设置条形码周围的空白边距
    });
</script>

条形码js下载地址

https://lindell.me/JsBarcode/

@LanCaiSheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js条形码生成

效果图<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="JsBarcode
复制链接

扫一扫