JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

上代码。尾部有单生成二维码连接，不打印
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="MyProject.test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="/JS/layui/css/layui.css?v=1.0" rel="stylesheet" />
    <script src="/JS/jquery-3.4.1.js?v=1.0"></script>
    <script src="/layuiadmin/layui/layui.js?v=1.0"></script>
    <script src="/JS/jquery-confirm.js?v=1.0"></script>
    <script src="/JS/jQuery.print.js"></script><%--JS打印--%>
    <script type="text/javascript" src="/JS/JsBarcode.all.js"></script><%--生成条形码--%>
    <script type="text/javascript" src="/JS/canvas2image.js"></script><%--条形码转图片--%>
    
    <style type="text/css">/*print打印时去掉页眉和页脚*/
        @page {
            size:auto;
            margin:10mm;
        }
    </style>
</head>
<body>
    <form class="layui-form" action=""  >
        <div class="layui-fluid">
            <div onclick="dayin03(this,'单据编号或要生成的条形码内容')"  style="cursor:pointer;">打印条形码</div>

            <canvas width="300" height="200" id="cvs"></canvas>
            <div id="imgs"></div>

        </div>
    </form>
    <script>
        var layer, form, laypage, index, newindex, laydate;
        var pageIndex = 1;
        var pageSize = 10;//页大小10
        var total;    //总条数
        var SearchId = "0";
        $(function () {
            layui.use(['layer', 'form', 'laypage', 'laydate'], function () {
                layer = layui.layer;
                form = layui.form;
                laypage = layui.laypage;
                laydate = layui.laydate;
                var $ = layui.jquery;

            });

        });

    </script>
    <script>
        var canvas, ctx, bMouseIsDown = false, iLastX, iLastY,
            $imgs,
            $convert, $imgW, $imgH,
            $sel;
        function init() {
            canvas = document.getElementById('cvs');
            ctx = canvas.getContext('2d');
            $convert = document.getElementById('convert');
            $sel = "png";//图片格式
            $imgs = document.getElementById('imgs');
            $imgW = "150";//图片宽度
            $imgH = "107";//图片高度
            bind();
            //draw();

            $("#cvs").hide();//默认隐藏条形码。可根据实际情况，默认显示或一直显示，注释此行
            $("#imgs").hide();//默认隐藏条形码。可根据实际情况，默认显示或一直显示，注释此行
        }
        function bind() {
            canvas.onmousedown = function (e) {
                bMouseIsDown = true;
                iLastX = e.clientX - canvas.offsetLeft + (window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft);
                iLastY = e.clientY - canvas.offsetTop + (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);
            }
            canvas.onmouseup = function () {
                bMouseIsDown = false;
                iLastX = -1;
                iLastY = -1;
            }
            canvas.onmousemove = function (e) {
                if (bMouseIsDown) {
                    var iX = e.clientX - canvas.offsetLeft + (window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft);
                    var iY = e.clientY - canvas.offsetTop + (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);
                    ctx.moveTo(iLastX, iLastY);
                    ctx.lineTo(iX, iY);
                    ctx.stroke();
                    iLastX = iX;
                    iLastY = iY;
                }
            };

            $convert.onclick = function (e) {
                var type = $sel.value,
                    w = $imgW.value,
                    h = $imgH.value;
                $imgs.appendChild(Canvas2Image.convertToImage(canvas, w, h, type))
            }

        }
        function draw() {
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, 600, 400);
            ctx.fillStyle = 'red';
            ctx.fillRect(100, 100, 50, 50);
        }

        onload = init;


        function dayin03(thisdiv, tiao) {

            $("#cvs").show();//打印时，要打印的内容必须显示，所以这里临时设置显示
            $("#imgs").show();
            $("#imgs").html("");
            $("#cvs").JsBarcode(tiao);//or JsBarcode("#canvascode", "Hello world!");

            canvas = document.getElementById('cvs');
            $imgs = document.getElementById('imgs');
            $imgs.appendChild(Canvas2Image.convertToImage(canvas, "150", "107", "png"));//画布，宽，高，文件后缀名

            alert($(thisdiv).prev().html());
            print打印时去掉页眉和页脚
            //$(thisdiv).prev().print({
            //    globalStyles: true,//是否包含父文档的样式，默认为true
            //    mediaPrint: false,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
            //    noPrintSelector: ".avoid-this",//不想打印的元素的jQuery选择器，默认为".no-print"
            //});
            $("#imgs").print({
                globalStyles: true,//是否包含父文档的样式，默认为true
                mediaPrint: false,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
                noPrintSelector: ".avoid-this",//不想打印的元素的jQuery选择器，默认为".no-print"
            });

            $("#cvs").hide();
            $("#imgs").hide();
        }

    </script>
    <script>
        layui.config({
            base: '/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use('index');
    </script>
</body>
</html>
只生成二维码，不生成图片不打印版本：JS生成条形码(一维码)插件JsBarcode用法详解【编码类型、参数_wybshyy的博客-CSDN博客
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

猜你喜欢
