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