上代码。尾部有单生成二维码连接，不打印
<%@ 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博客
