二维码（qrcode）和条形码（JsBarcode）

最新推荐文章于 2024-05-18 22:08:03 发布

程序大白兔

最新推荐文章于 2024-05-18 22:08:03 发布

阅读量432

点赞数 10

分类专栏： Web前端文章标签：前端 javascript 前端框架 html jquery css css3

本文链接：https://blog.csdn.net/m0_46641774/article/details/135147407

版权

Web前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta name="referrer" content="no-referrer" />
    <meta http-equiv="Expires" CONTENT=“0″>
    <meta http-equiv="Cache-Control" CONTENT="no-cache">
    <meta http-equiv="Pragma" CONTENT="no-cache">
    <title>二维码/条形码生成</title>
</head>
<body>
    @*二维码生成1 依赖qrcode.js*@
    <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script>
    <div id="qrcode1" style="margin-bottom: 100px;"></div>
    <script>
        var qrcode = new QRCode(document.getElementById('qrcode1'), {
            text: "https://www.baidu.com",//生成二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000',
            colorLight: "#ffffff"
        });
    </script>
    @*二维码生成2 依赖jquery库*@
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <div id="qrcode2"></div>
    <script>
        $('#qrcode2').qrcode({
            render: 'canvas', // 或 table
            height: 100,
            width: 100,
            text: "这里是生成二维码的内容",//生成二维码的内容
            typeNumber: -1, // 计算模式
            correctLevel: 2, // 二维码纠错级别
            background: "#ffffff", // 背景颜色
            foreground: "#000000" // 二维码颜色
        })
    </script>
    @*条形码生成*@
    <script type="text/javascript" src="~/js/JsBarcode.all.js"></script>
    @*JsBarcode.all.js下载链接：https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js*@
    <img id="imgid" />
    <svg id="svgid"></svg>
    <canvas id="cancasid"></canvas>
    <script>
        //以下生成方法都通用
        // $("#imgid").JsBarcode("img")
        JsBarcode("#imgid", "123", {
            format: "CODE128",//选择要使用的条形码类型 包括EAN、CODE128、UPC、CODE39、ITF等
            width: 2,//设置条之间的宽度
            height: 80,//高度
            displayValue: true,//是否在条形码下方显示文字
            text: "88888",//覆盖显示的文本
            fontOptions: "bold italic",//使文字加粗体或变斜体
            font: "fantasy",//设置文本的字体
            textAlign: "left",//设置文本的水平对齐方式
            textPosition: "top",//设置文本的垂直位置
            textMargin: 3,//设置条形码和文本之间的间距
            fontSize: 20,//设置文本的大小
            background: "#67C23A",//设置条形码的背景
            lineColor: "#000000",//设置条和文本的颜色。
            margin: 15//设置条形码周围的空白边距
        });

        // $("#svgid").JsBarcode("svg")
        JsBarcode("#svgid", "svg");

        $("#cancasid").JsBarcode("cancas")

    </script>
</body>
</html>