Ejemplos de impresión de códigos de barras mvc (usando window.print para imprimir códigos de barras)
Código:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
var types = ViewData["types"].ToString().Trim();
}
<script src="@Url.Content("~/Areas/Area/AreaScripts/PrinterInWarehouse.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Areas/Area/AreaScripts/qrcode.min.js")"></script>
<script src="@Url.Content("~/Areas/Area/AreaScripts/qrcode.js")"></script>
<script>
$(function () {
makeCode();
});
//这是二维码
function makeCode() {
var listCode1 = '@ViewData["list"]';
var jsonString = listCode1.replace(new RegExp('"', "gm"), '"')
var data = eval('(' + jsonString + ')');
for (var i = 0; i < data.listData.length; i++) {
var ids = null
var qrcode =null;
if(@types=="3"){
ids = "qrcode'" + data.listData[i].JWBCode + "'";
qrcode = new QRCode(document.getElementById(ids), {
width: 50,
height: 50
});
var strCode= data.listData[i].JWBRId + "/" + data.listData[i].JWBCode + "/" + data.listData[i].JWCode;
qrcode.makeCode(strCode);
}
}
}
function btndy() {
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body></html>";
var newstr = $("#daYing").html(); // 获取要打印的div内容
var oldstr = document.body.innerHTML; // 将过去的body内容存到oldstr
document.body.innerHTML = headstr + newstr + footstr; // 组合打印内容
window.print.portrait = false; //true为纵向打印，flase为横向打印
window.print.header = "1231"; //页眉
window.print.footer = "31"; //页脚
window.print(); // 弹出打印窗体
document.body.innerHTML = oldstr; // 还原HTML内容
location.reload(); //重新刷新当前窗口, 很重要. 不刷新会导致除局部之外的全失效了
window.document.body.innerHTML = oldstr;//重新给页面内容赋值；
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>PrinterInWarehouse</title>
</head>
<body style="overflow: auto;">
<input hidden id="ids" />
<div id="divTop">
<div id="tb" style="padding:2px 5px; background: #F4F4F4;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print'" onclick="btndy()">打 印</a>
@*<a href="javascript:history.go(-1)" class="easyui-linkbutton" data-options="iconCls:'icon-back'">返 回</a>*@
</div>
</div>
<div id="dy">
@if (types == "3")
{
var data = ViewData["part"] as List<XYWMS.EF.ENTITY.VJWhsBinRela_JWarehouse>;
if (data.Count == 0)
{
<div id="isYing" style="color:red;font-size:35px;">还没有录入数据</div>
}
else
{
<div id="daYing">
@foreach (var item in data)
{
<table style="border:1px inset black;margin-top:10px;margin-bottom:10px;width:auto" height="280">
<tr>
<td>
<div style="width:275px;border-bottom: inset 1px black;height:30px;">
<div>库位编码：@item.JWBCode</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="width:275px;border-bottom: inset 1px black;height:30px;">
<div>仓库编码：@item.JWCode</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="width:275px;border-bottom: inset 1px black;height:30px;">
<div>仓库名称：@item.JWName</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="width:275px;height:55px;line-height:11px;">
<div id="qrcode'@item.JWBCode'" style="width:55px; height:55px; position:absolute; left:210px;"></div>
</div>
</td>
</tr>
</table>
<div style="height:5px;"></div>
}
</div>
}
}
</div>
</body>
</html>
Se puede usar directamente después de cambiar la fuente de datos (o asignar un valor estático)
El efecto es el siguiente:
