原先使用Grid++Report6打印报表,由于这个插件对于浏览器支持不到位,所以放弃使用了。所以考虑的做一个可以可以直接使用浏览器默认的打印方式实现(window.print());
参考了京东的订单打印,有如下思路:
- 在html页面完成对应打印单据的排版
- 调用打印页面调用的时候携带数据跳转到打印页面
- 获取url携带的信息,使用ajax获取打印的数据
- 使用angularJs来渲染需要打印的数据
html显示样式与打印样式的区别
正常的显示样式就使用正常的样式显示就可以
<style></style>
或者
<link href=".." rel="stylesheet" />
打印样式使用的的就加上media属性就可以了
<style type="text/css" media="print">
...具体样式
</style>
具体html代码
*具体的css代码就不给出了,就是正常css和打印css的不同设置
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myCtrl">
<head>
<title>打印标题 {{title}}</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="image/32.png" type="image/x-icon" />
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 正常引用的样式文件 -->
<link rel="stylesheet" href="css/printTicket.css">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
<!-- 打印样式,在打印时候生效 -->
<style type="text/css" media="print">
.printButtonDiv {
display:none;
}
.printAll {
width:100%;
padding:0px;
}
.printLeft{
display:none;
}
.printHead{
padding:10px;
margin:0px;
}
.rowBody{
min-width: 0px !important;
}
.printBarCode{
margin-top:20px;
margin-bottom: 20px;
width: 450px;
height: 180px;
}
</style>
</head>
<body>
<div class="rowBody">
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-8 col-md-8 printAll">
<div class="col-xs-12 col-md-12 printButtonDiv">
<div class="panel panel-default printButtonbody" >
<div class="panel-body printButtonList">
<button ng-click="printFunc()" class="btn btn-default pull-right printButton">打印</button>
</div>
</div>
</div>
<div class="col-xs-12 col-md-12 printHead" ng-repeat="A in PringData.Detail">
<div class="col-xs-12 col-md-12 printBorder">
<div class="col-xs-12 col-md-12">
<div class="col-xs-3 col-md-3 printTitleDiv printTitleDivLogo">
<img class="logo" src="image/printLogo.png" alt="打印logo">
</div>
<div class="col-xs-6 col-md-6 printTitleDiv">
<h4 class="printTitle printTitleHead"><b>{{A.BQBH}}</b></h4>
</div>
<div class="col-xs-3 col-md-3 printTitleDiv">
<h3 class="printTitle">字段1</h3>
<h2 class="printTitle"><b>{{A.Province}}</b></h2>
</div>
</div>
<div class="col-xs-12 col-md-12">
<div class="col-xs-8 col-md-8 printMiddleCode">
<!-- 后台java写的一个条形码的接口,使用的是barcode4j,详细使用请百度 -->
<img alt="条形码" class="printBarCode" src="http://yuyuan:8080/test-yu/servlet/GetBarCode?data={{A.TXM}}">
</div>
<div class="col-xs-4 col-md-4 printMiddleJS">
<center><h1 class="printTitle printTitleJS"><b>字段2{{A.JSBH}}</b></h1></center>
</div>
</div>
<div class="col-xs-12 col-md-12">
<div class="col-xs-2 col-md-2 printTitleBottom"><h4 class="printTitle printTitleBottomData"><b>字段3</b></h4></div>
<div class="col-xs-10 col-md-10"><h4 class="printTitle printTitleBottomData">{{A.Contact_Name}}</h4></div>
</div>
<div class="col-xs-12 col-md-12">
<div class="col-xs-2 col-md-2 printTitleBottom"><h4 class="printTitle printTitleBottomData"><b>字段4:</b></h4></div>
<div class="col-xs-10 col-md-10"><h4 class="printTitle printTitleBottomData printTitleBottomDataTow">{{A.Address}}</h4></div>
</div>
<div class="col-xs-12 col-md-12">
<div class="col-xs-2 col-md-2 printTitleBottom"><h4 class="printTitle printTitleBottomData"><b>字段5:</b></h4></div>
<div class="col-xs-10 col-md-10"><h4 class="printTitle printTitleBottomData">{{A.BZ}}</h4></div>
</div>
<div class="col-xs-12 col-md-12">
<div class="col-xs-5 col-md-5 printTitleBottomFoot">
<h3 class="printTitle printTitleBottomData printTitleBottomFootHead">
<b>字段6:{{A.KFDH}}</b>
</h3>
</div>
<div class="col-xs-7 col-md-7 printTitleBottomFoot">
<h3 class="printTitle printTitleBottomData printTitleBottomFootHead">
<b>字段7:{{A.WDXZDZ}}</b>
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/printTicket.js"></script>
</body>
</html>
具体js代码
(function (angular) {
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//打印使用
//1、获取打印数据(根据传进来的url)
//2、点击打印
/**
* 获取url参数
* 根据约定的参数名称获取对应的信息
*/
$scope.GetQueryString=function(data)
{
var reg = new RegExp("(^|&)"+data+"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null){
return decodeURI(r[2]);
}
return null;
}
/**
* 请求ajax数据
* 要是获取失败弹出失败信息
*/
$scope.getPringData=function(DataUrl){
var back=null;
$.ajax({
type: 'get',
url: DataUrl,
async:false,
success: function(data){
data=JSON.parse(data);
if(data.Detail.length>0){
//计算总件数
back=data;
}else{
alert("打印数据请求失败!");
}
},
error: function (e) {
alert("打印数据请求失败!");
}
});
return back;
}
/**
* 页面打印调用
* 页面打印按钮绑定的时间
*/
$scope.printFunc=function(){
window.print();
}
// 获取url中ajax的url
var url=decodeURIComponent($scope.GetQueryString("data"));
//获取url中用于显示的标题
$scope.title=$scope.GetQueryString("title");
//获取渲染的数据
$scope.PringData=$scope.getPringData(url);
});
})(angular);
页面显示效果
打印显示效果
总结
在使用url做接收参数的时候,会有一定的危险性,可以使用后台渲染的形式,来确定安全性。
还页面图片被我去敏了。详细的结果就是显示的样式和打印的样式是不一样的,不要在意这些细节~