浏览器网站打印标签
网站通过浏览器来打印标签
文章目录
- 网站通过浏览器来打印标签
- 一、标签需要条码？
- 二、使用前的标签打印机的配置
- 三、使用步骤
-
- 1.引入maven包
- 2.编写生成条码的工具类
- 3.封装调用接口，生成条码，并跳转到标签打印页面。
- 4.页面调用浏览器的打印工具
- 5.浏览器打印设置
- 总结
业务场景需要，我们由我们之前的erp系统过于庞大，现在需要把一部分承运商操作放在网页版上面，所有的承运商操作都在网页上面，那么就出现了一个问题运单录入后需要打印标签。
一、标签需要条码？
条码的生成分为前端生成和后端生成，我们开始使用的是前端生成的条码，采用的是 JsBarcode，但是使用后发现生成的条码不太清晰扫描不出来；后来采用的是后端生成生成条码，存放在图片服务器，打印完成后调用接口删除条码图片。
前端使用：这里就简单提一下
JsBarcode("#imgcode1", "${fixedAssetsManage1.assetCode}", {
format: "CODE128",//选择要使用的条形码类型
width:2,//设置条之间的宽度
displayValue:false,
height:130,//高度
});
后端使用：barcode4j-light
下面我们就来介绍后端使用的步骤
二、使用前的标签打印机的配置
设置电脑的打印设置，设置成自己的标签大小
三、使用步骤
1.引入maven包
代码如下（示例）：
<dependency>
<groupId>net.sf.barcode4j</groupId>
<artifactId>barcode4j-light</artifactId>
<version>2.0</version>
</dependency>
2.编写生成条码的工具类
代码如下（示例）：
import org.apache.commons.lang.StringUtils;
import org.krysalis.barcode4j.impl.code128.Code128Bean;
import org.krysalis.barcode4j.output.bitmap.BitmapCanvasProvider;
import org.krysalis.barcode4j.tools.UnitConv;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.*;
public class BarcodeUtil {
/**
* 生成文件
*
* @param msg
* @param path
* @return
*/
public static File generateFile(String msg, String path, String type) {
File file = new File(path);
try {
if(StringUtils.isEmpty(type)) {
generate(msg, new FileOutputStream(file));
}else{
generate(msg, new ByteArrayOutputStream(), path,type);
}
} catch (FileNotFoundException e) {
throw new RuntimeException(e);
}
return file;
}
/**
* 生成字节
*
* @param msg
* @return
*/
public static byte[] generate(String msg) {
ByteArrayOutputStream ous = new ByteArrayOutputStream();
generate(msg, ous);
return ous.toByteArray();
}
/**
* 生成到 页面流
*
* @param msg
* @return
*/
public static void generateIo(String msg,OutputStream out) throws IOException {
ByteArrayOutputStream ous = new ByteArrayOutputStream();
generate(msg, ous);
byte[] bytes = ous.toByteArray();
BufferedImage src = ImageIO.read(new ByteArrayInputStream(bytes));
//顺时针旋转90度
BufferedImage des1 = RotateImage.Rotate(src, 90);
ImageIO.write(des1,"jpg",out);
}
/**
* 生成到流
*
* @param msg
* @param ous
*/
public static void generate(String msg, OutputStream ous) {
if (StringUtils.isEmpty(msg) || ous == null) {
return;
}
Code128Bean bean = new Code128Bean();
final int dpi = 130;
// int dpi = 512;
// module宽度
final double moduleWidth = UnitConv.in2mm(1.0f / dpi);
// 设置两侧是否留白
bean.doQuietZone(true);
//
// 设置条形码高度和宽度
bean.setBarHeight(7d);
bean.setModuleWidth(moduleWidth);
bean.setFontSize(UnitConv.pt2mm(7.0D));
String format = "image/png";
try {
// 输出到流
BitmapCanvasProvider canvas = new BitmapCanvasProvider(ous, format, dpi,
BufferedImage.TYPE_BYTE_BINARY, false, 0);
// 生成条形码
bean.generateBarcode(canvas, msg);
// 结束绘制
canvas.finish();
} catch (IOException e) {
throw new RuntimeException(e);
}
}
/**
* 生成到流
*
* @param msg
* @param ous
*/
public static void generate(String msg, ByteArrayOutputStream ous, String path, String type) {
if (StringUtils.isEmpty(msg) || ous == null) {
return;
}
Code128Bean bean = new Code128Bean();
final int dpi = 130;
// int dpi = 512;
// module宽度
final double moduleWidth = UnitConv.in2mm(1.0f / dpi);
// 设置两侧是否留白
bean.doQuietZone(true);
//
// 设置条形码高度和宽度
bean.setBarHeight(7d);
bean.setModuleWidth(moduleWidth);
bean.setFontSize(UnitConv.pt2mm(7.002D));
String format = "image/png";
try {
// 输出到流
BitmapCanvasProvider canvas = new BitmapCanvasProvider(ous, format, dpi,
BufferedImage.TYPE_BYTE_BINARY, false, 0);
// 生成条形码
bean.generateBarcode(canvas, msg);
// 结束绘制
canvas.finish();
// ByteInputStream inputStream = new ByteInputStream();
// inputStream.
byte[] bytes = ous.toByteArray();
BufferedImage src = ImageIO.read(new ByteArrayInputStream(bytes));
//顺时针旋转90度
BufferedImage des1 = RotateImage.Rotate(src, 90);
ImageIO.write(des1, "jpg", new File(path));
} catch (IOException e) {
throw new RuntimeException(e);
}
}
public static void main(String[] args) {
LabelPrint.createFolder("C:\\EasLabelFile\\");
String msg = "2001040059310006";
// String path = "C:\\EasLabelFile\\barcode.jpg";
String path = "C:\\EasLabelFile\\2001040059310006.jpg";
ByteArrayOutputStream ous = new ByteArrayOutputStream();
// generateFile(msg, path);
generateFile(msg, path, "byte");
}
}
图片可以根据需要保存的你需要你的位置，图片名称可以直接使用条码，这样页面使用的时候也更方便，简单来说根据个人需要调整即可。我这里的图片路径是所有条码通用根目录，后面接了一层目录运单号，后面就是标签的名称加.jpg作为图片名称了。
3.封装调用接口，生成条码，并跳转到标签打印页面。
这里就不做详细描述了，就是简单的把需要打印的标签详细封装到对象或集合列表中，并生成条码传递到前端页面。
4.页面调用浏览器的打印工具
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签打印</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="../../../../static/layuicms/layui/css/layui.css" media="all" />
<script type="text/javascript" src="../../../../static/layuicms/layui/layui.js"></script>
<script type="text/javascript" src="../../../../static/layuicms/js/jquery-2.1.4/jquery.js"></script>
<style type="text/css">
/* 打印去掉页眉页脚 */
@page {
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
</style>
</head>
<body >
<div class="childrenBody">
<c:if test="${labelPrintNoList != null && waybill != null}">
<c:forEach var="labelPrint" items="${labelPrintNoList}" varStatus="status">
<div class="table-div" style="display: block;width: 300px; height: 241px; margin: auto;">
<table border="1" cellspacing="0" cellpadding="3" style=" width: 300px; height: 230px;">
<tr>
<td colspan="3" height="20px"><span style="margin-left: 5px;">XX物流</span></td>
</tr>
<tr>
<td rowspan="4" width="80px">
<img id="${labelPrint}" src="/static/codeImages/${waybill.fnumber}/${labelPrint}.jpg" class="imgCode" style="width: 70px;height: 170px;"/>
</td>
<td colspan="2" height="25px">
<div>
<span style="float: left;position: relative;left:3px;font-size: 16px">${waybill.fnumber}</span>
<span style="float: left;position: relative;top:6px;font-size: 10px;max-width: 108px; height: 25px; overflow: hidden;">
${waybill.cfcreatedepname}
</span>
</div>
</td>
</tr>
<tr>
<td height="30px" align="center">
<div style="max-width:200px;height: 30px; overflow: hidden;">
<strong>${waybill.cfreceivingname}</strong>
</div>
</td>
<td width="30px" align="center">
<div style="max-width: 40px; height: 30px; overflow: hidden;">
<strong> ${waybill.cftransporttypename} </strong>
</div>
</td>
</tr>
<tr>
<td colspan="2" height="108px">
<div style="width: 100%;height: 108px;position:relative;">
<div style="width: 100%;height: 25%;">
<span style="position:relative;left:5px;top:0px;font-size:18px;float:left;max-width: 130px; height: 27px; overflow: hidden;">
${waybill.cfendcityname}
</span>
<span style="position:relative;right:3px;top:0px;font-size:18px;float:right;max-width: 130px; height: 27px; overflow: hidden;">
${waybill.cfendareaaddressname}
</span>
</div>
<div style="width: 100%;height: 25%;">
</div>
<div style="width: 100%;height: 25%;position:absolute;bottom: 0px">
<span style="position:relative;left:5px;bottom:2px;font-size:18px;float:left;width: 57px;height: 27px; overflow: hidden;">
${waybill.cfpacknumber}件
</span>
<span style="position:relative;right:3px;bottom:0px;font-size:18px;float:right;max-width: 160px;height: 27px; overflow: hidden;">
${waybill.cfendprovincename}
</span>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2" height="25px" >
<span style="font-size: 10px;margin-left: 5px">
${waybill.fcreatetimeStr}
</span>
<span style="font-size: 16px;">
<fmt:formatNumber type="number" value="${waybill.cfcostweight}" pattern="0.0" maxFractionDigits="1"/>Kg<fmt:formatNumber type="number" value="${waybill.cfvolume}" pattern="0.0" maxFractionDigits="1"/>m³
</span>
</td>
</tr>
</table>
</div>
</c:forEach>
</c:if>
<c:if test="${labelPrintNoList == null || waybill == null}">
没有可以打印的标签！${msg}
</c:if>
</div>
<script type="text/javascript">
// var formSelects = layui.formSelects;
layui.use(['form', 'layer', 'laydate', 'table', 'laytpl', 'element'], function() {
var form = layui.form,
layer = layui.layer,
$ = layui.jquery,
laydate = layui.laydate,
laytpl = layui.laytpl,
element = layui.element,
table = layui.table,
formSelects = layui.formSelects;
debugger
if("${waybill!= null && labelPrintNoList != null}" == "true") {
var headstr = "";
var footstr = "";
//获得 print_div 里的所有 html 数据(把要打印的数据嵌套在 一个 div 里，获得 div)
//var printData = document.getElementById("print").innerHTML;
var printData = $('.childrenBody').html();
//获取当前页面的html
var oldstr = document.body.innerHTML;
//把 headstr+printData+footstr 里的数据 复制给 body 的 html 数据 ，相当于重置了 整个页面的 内容
document.body.innerHTML = headstr+printData+footstr;
//使用方法为 window.print() 打印页面上局部的数据
window.print();
document.body.innerHTML = oldstr;
setTimeout("parent.layer.closeAll(\"iframe\")", 1000);
// parent.layer.closeAll("iframe");
}
});
</script >
</body>
</html>
5.浏览器打印设置
根据标签表格的大小以及位置，调整浏览器打印设置
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。