原先使用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做接收參數的時候，會有一定的危險性，可以使用後臺渲染的形式，來確定安全性。
還頁面圖片被我去敏了。詳細的結果就是顯示的樣式和打印的樣式是不一樣的，不要在意這些細節~