<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>领料单</title>
<!--打印机媒体标签-->
<link rel="stylesheet" type="text/css" href="print.css" media="print">
<link rel="stylesheet" href="CSS/chanpingwuliao.css">
<!--<script src="JS/angular.min.js"></script>-->
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<!--插入打印控件-->
<OBJECT ID="jatoolsPrinter" CLASSID="CLSID:B43D3361-D075-4BE2-87FE-057188254255"
codebase="jatoolsPrinter.cab#version=8,6,0,0"></OBJECT>
<script>
// 1.一个打印界面
function doPrint(how) {
/*要打印的p对象在本文档中,控件将从本文档中的id为'page1'的p对象，
作为首页打印id 为'page2'的作为第二页打印*/
var myDoc = {
autoBreakPage: true, //自动分页设置// documents: new Array(document, // 打印页面(p)们在正显示在本文档中
// 'attache1.htm', // 打印页面(p)们在一个url指定的文档中
// 'attache2.htm'),
// 待保留的打印设置id,打印后将被保存在注册表中,
// 下一次启动相同值的settingsID,打印文档时,
// 控件将用保留的参数,自动设置打印机
settingsID:"mysettings",
//打印前设置参数:
settings:{
copies:1, //打印份数
copyway:'112233', //打印顺序 默认为123123
// 如果想使用默认打印机,不需要设置
// printer: '联想激打',
// 指定纸张的高宽以十分之一毫米为单位,本设置实际是指定为a4大小
paperWidth : 2100,
paperHeight : 2970,
// 指定打打印方向为横向, 1/2 = 纵向/横向
orientation : 2
},
//必要时缩放打印
fitToPage :true,
// 强制上、下、左、右边距为零
marginIgnored:true,
// 需要打印的p在当前页面中,使用文档格式
documents: document,
copyrights: '杰创软件拥有版权 www.jatools.com' // 版权声明,必须
};
if(how == 1){
document.getElementById("jatoolsPrinter").printPreview(myDoc ); // 打印预览
}else if(how == 2){
document.getElementById("jatoolsPrinter").print(myDoc ,true); // 打印前弹出打印设置对话框
}else{
document.getElementById("jatoolsPrinter").print(myDoc ,false); // 不弹出对话框打印
}
}
</script></head>
<!--ng-app指定angular架构,ng-controller创建控制器-->
<body ng-app="myApp" ng-controller="myCtrl">
<!--打印控件-->
<p class="dayin">
<input type="button" value="打印预览..." onClick="doPrint(1)">
<input type="button" value="打印..." style="padding-left:5px;" onClick="doPrint(2)">
<input type="button" value="打印" style="padding-left:5px;" onClick="doPrint()"></p>
<!--主盒子,page1打印一页-->
<p class="box" id='page1' style='width: 749px;height: 1123px;'>
<!--大标题-->
<p class="dabiaoti" >
<h3>产品物料</h3>
</p>
<!--小标题-->
<p class="xiaobiaoti" ng-repeat="obj in names">
<p>产品名称:{{obj.prod_name}}</p>
<p>产品编码:{{obj.prod_id}}</p>
</p>
<!--表格部分-->
<table class="tab" cellspacing="0" cellpadding="10px" ng-repeat="obj in names">
<tr>
<th style="width:120px;">行号</th>
<th style="width:120px;">物料编码</th>
<th style="width:120px;">物料名称</th>
<th style="width:120px;">类型</th>
<th style="width:120px;">数量</th>
<th style="width:120px;">损耗率</th>
<th style="width:120px;">贴片数</th>
</tr>
<tr>
<td>1</td>
<td>{{obj.prodtype_name}}</td>
<td>{{obj.prod_code}}</td>
<td>{{obj.prod_model}}</td>
<td>{{obj.prod_stockcount}}</td>
<td>{{obj.prod_lost}}</td>
<td>{{obj.prod_smtcount}}</td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>10</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>11</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr></p>
</body>
<script>
// angularjs 初始化 ng-app="myApp",json静态数据;
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope,httpService){
var obj = {
'v' : 1,
'prod_id' : 10,
't' : 0.6861832864488719,
'query' : print
};
httpService.postDatas('p/prod.json',obj,function(data){
data = eval(data);
console.log(data);
$scope.names = data.ds;
})
});
app.service("httpService", function ($http) {
return {
getDatas: function (url, obj1, succCallBack, errorCallBack) {
return $http({
method: "GET",
url: url,
params: obj1 || {}
}).success(function (data) {
succCallBack && succCallBack(data);
}).error(function (data) {
errorCallBack && errorCallBack(data);
})
},
postDatas: function (url, obj1, succCallBack, errorCallBack) {
return $http({
method: "POST",
url: 'p/prod.json',
data: obj1 || {},
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest: function (obj) {
var str = [];
for (var p in obj) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
}
}).success(function (data) {
succCallBack && succCallBack(data);
}).error(function (data) {
errorCallBack && errorCallBack(data);
})
}
}
});</script>
</html>
如果使用的Angularjs，一般不会选择去支持IE8。不过可以给你一些建议：
<html xmlns:ng=”http://angularjs.org”> 在html节点添加xmlns，针对IE的
还有我们会用到template，ng-include,ng-view等，IE8无法识别，所以要动态创建
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
</script>
还有ng-class什么的，都要自己考虑，之前做用ng来做的项目，兼容性真的很烦