|
原先使用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./jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn./bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 正常引用的样式文件 -->
<link rel="stylesheet" href="css/printTicket.css">
<script src="https://cdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn./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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
具体js代码
实例url：
http://yuyuan:8080/test-yu/PrintTicket.html?title=%E6%89%93%E5%8D%B0%E6%A0%87%E7%AD%BE&data=http%3A%2F%2F10.3.87.33%3A8080%2Ftest-yu%2Fservlet%2FGetTransBiaoqianMingxiPrint%3Fdata%3Df2e31cb221c9e711b63a000c29d6c8f4%26do%3D1
(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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
页面显示效果
打印显示效果
总结
在使用url做接收参数的时候，会有一定的危险性，可以使用后台渲染的形式，来确定安全性。
还页面图片被我去敏了。详细的结果就是显示的样式和打印的样式是不一样的，不要在意这些细节~
|
