MVC中的打印功能
HTML页面：
@{
Layout = "~/Views/Shared/_IframeLayout.cshtml";
}
@Scripts.Render(ViewBag.ScriptPath + "/JS/tableExport.js" + ViewBag.ScriptVersion)
@Scripts.Render(ViewBag.RootPath + "/Scripts/DataCenter/Odometer.js" + ViewBag.JsVersion)
<a id="aExportData" hidden><span>导出</span></a>
<div class="row" id="search" style="padding:5px 0px;">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="input-group">
<span class="input-group-addon">开始时间</span>
<input class="form-control" placeholder="开始时间" id="begintime"
/>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="input-group">
<span class="input-group-addon">结束时间</span>
<input class="form-control" placeholder="结束时间" id='endtime'
/>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="input-group">
<span class="input-group-addon">车牌</span>
<input type="text" class="form-control" id="txtVehicleID" />
<input type="hidden" id="hidVehicleID" />
<input type="hidden" id="hidVehicleName" />
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<button class="btn btn-primary" id="btnSearch" onclick="SearchInfo()"><i class="fa fa-search"></i> 查询</button>
<button class="btn btn-primary" id="btnImport" onclick="ImportToExcel()"><i class="fa fa-file-excel-o"></i> 导出</button>
<button class="btn btn-primary" type="button" id="bt" onclick="print()">打印</button>
</div>
</div>
<div id="ToPrintTable" style="padding:0px 5px;width:100%" class="tableDiv">
<table id="OdometerTable"></table>
<div id="OdometerPager"></div>
</div>
<script>
$(function () {
//时间选择器
laydate.render({
elem: '#begintime'
, type: 'date'
, theme: '#393D49'
});
laydate.render({
elem: '#endtime'
, type: 'date'
, theme: '#393D49'
});
})
function print() {
var userAgent = navigator.userAgent.toLowerCase(); //取得浏览器的userAgent字符串
if (userAgent.indexOf("trident") > -1) {
alert("请使用google或者360浏览器打印");
return false;
} else if (userAgent.indexOf('msie') > -1) {
var onlyChoseAlert = simpleAlert({
"content": "请使用Google或者360浏览器打印",
"buttons": {
"确定": function () {
onlyChoseAlert.close();
}
}
})
alert("请使用google或者360浏览器打印");
return false;
} else {//其它浏览器使用lodop
var oldstr = document.body.innerHTML;
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body></html>";
//执行隐藏打印区域不需要打印的内容
document.getElementById("OdometerPager").style.display = "none";
var printData = document.getElementById("ToPrintTable").innerHTML; //获得 div 里的所有 html 数据
var wind = window.open("", "newwin",
"toolbar=no,scrollbars=yes,menubar=no");
wind.document.body.innerHTML = headstr + printData + footstr;
wind.print();
//打印结束后，放开隐藏内容
document.getElementById("otherpho").style.display = "block";
wind.close();
window.document.body.innerHTML = oldstr;
}
}
</script>
/*JS页面*/
var columnsObj = {
vehilceid: {
name: 'VehicleID', label: '车辆ID', hidden: true, formatter(a,b,c) {
if(a){
return a;
}
}
},
regname: { name: 'RegName', label: '车牌号', sortable: true, width: 50 },
bodometer: { name: 'BOdometer', label: '开始里程', sortable: true, width: 50 },
eodometer: { name: 'EOdometer', label: '结束里程', sortable: true, width: 50 },
avgspeed: { name: 'AvgSpeed', label: '平均速度(km/h)', sortable: true, width: 50 },
runodometer: { name: 'RunOdometer', label: '运行里程(KM)', sortable: true, width: 50 },
viewruntime: { name: 'ViewRunTime', label: '运行时长(s)', sortable: true, width: 50 },
btime: { name: 'BTime', label: '开始定位时间', sortable: true, width: 100, formatter: "date", formatoptions: { srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s' } },
etime: { name: 'ETime', label: '结束定位时间', sortable: true, width: 100, formatter: "date", formatoptions: { srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s' } },
bplacename: { name: 'BPlaceName', label: '开始位置', sortable: true, width: 100 },
eplacename: { name: 'EPlaceName', label: '结束位置', sortable: true, width: 100 }
};
$(function () {
$('#LiOdometerPage').addClass("active").parents('li').addClass("open active");
initTable();
var VehicleSel = new MultiSelect();
VehicleSel.InitSelect("", getRootPath() + "/ManagerCenter/Vehicle/GetVehicleTreeAjax", 'txtVehicleID', 'hidVehicleID', 'hidVehicleName');
});
function PageResize() {
$("#OdometerTable").setGridWidth($(".tableDiv").width()).setGridHeight(getHeight());
};
//设置表格高度
function getHeight() {
return $(window).height() - $("#search").outerHeight(true) - 120;
};
//初始化表格
function initTable() {
$("#OdometerTable").jqGrid({
datatype: "json",
mtype: "post",
colModel: [columnsObj.vehilceid, columnsObj.regname, columnsObj.runodometer, columnsObj.viewruntime, columnsObj.btime, columnsObj.etime, columnsObj.bplacename, columnsObj.eplacename],
styleUI: "Bootstrap",
viewrecords: true,
autowidth: true,
scrollrows: true,
rownumbers: true,
rowNum: 20,
rowList: [20, 50, 100],
width: $(".tableDiv").width(),
caption: '<b style="font-size:18px;">里程报表</b>',
pager: "#OdometerPager",
height: getHeight(),
subGrid: true,
subGridOptions: {
"plusicon": "glyphicon-chevron-right",
"minusicon": "glyphicon-chevron-down",
"openicon": "",
reloadOnExpand: false
},
isHasSubGrid: function (rowid) {
var rowdata = $("#OdometerTable").jqGrid('getRowData', rowid);
if (rowdata.BTime.substring(0, 10) == rowdata.ETime.substring(0, 10)) { return false; }
return true;
},
subGridRowExpanded: function (subgrid_id, row_id) {
var rowdata = $("#OdometerTable").jqGrid('getRowData', row_id);
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' '></div>");
$("#" + subgrid_table_id).jqGrid({
url: getRootPath() + '/DataCenter/Odometer/GetOdometerDataAjax?',
datatype: 'json',
postData: {
pVehicleIDs: rowdata.VehicleID,
pType: 2,
pBTime: rowdata.BTime,
pETime: rowdata.ETime
},
colModel: [columnsObj.runodometer, columnsObj.viewruntime, columnsObj.btime, columnsObj.etime, columnsObj.bplacename, columnsObj.eplacename],
rowNum: 20,
autowidth: true,
rownumbers: true,
pager: pager_id,
styleUI: "Bootstrap",
height: '100%'
});
$("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: false, add: false, del: false, search: false });
$("#" + subgrid_table_id).closest(".ui-jqgrid-bdiv").css({ "overflow": "auto" });
},
subGridRowColapsed: function (subgrid_id, row_id) { }
});
$("#OdometerTable").closest(".ui-jqgrid-bdiv").css({ "overflow": "auto" });
$("#OdometerTable").setSelection(4, true);
$("#OdometerTable").jqGrid("navGrid", "#OdometerPager", { edit: false, add: false, del: false, search: false }, { height: 200, reloadAfterSubmit: false });
$(window).bind("resize", function () {
PageResize();
});
};
//设置表格高度
function getHeight() {
return $(window).height() - $("#search").outerHeight(true) - 170;
};
//查询按钮
function SearchInfo() {
$('#btnSearch').addClass('disabled');
$("#OdometerTable").jqGrid('setGridParam', {
url: getRootPath() + '/DataCenter/Odometer/GetOdometerDataAjax?',
datatype: 'json',
postData: {
pVehicleIDs: $("#hidVehicleID").val(),
pType: 1,
pBTime: $("#begintime").val() + ' 00:00:00',
pETime: $("#endtime").val() + ' 23:59:59'
},
page: 1
}).trigger("reloadGrid"); //重新载入
$('#btnSearch').removeClass('disabled');
};
//里程汇总导出
function ImportToExcel() {
try {
var data = $("#OdometerTable").getRowData();
if (data.length == 0) {
layer.msg('当前页无可导出数据', { time: 2000, icon: 0 });
return;
}
var table = '<table id="newTable" border="1" cellspacing="0" cellpadding="0">';
table += '<thead>'
+ '<tr>'
+ ' <th>车牌号</th>'
+ ' <th>运行里程(KM)</th>'
+ ' <th>运行时长(s)</th>'
+ ' <th>开始定位时间</th>'
+ ' <th>结束定位时间</th>'
+ ' <th>开始位置</th>'
+ ' <th>结束位置</th>'
+ '</tr>'
+ '</thead><tbody>';
for (var i = 0, l = data.length; i < l; i++) {
table += '<tr>'
+ ' <td>' + data[i].RegName.toString() + '</td>'
+ ' <td>' + data[i].RunOdometer.toString() + '</td>'
+ ' <td>' + data[i].ViewRunTime.toString() + '</td>'
+ ' <td>' + data[i].BTime.toString() + '</td>'
+ ' <td>' + data[i].ETime.toString() + '</td>'
+ ' <td>' + data[i].BPlaceName.toString() + '</td>'
+ ' <td>' + data[i].EPlaceName.toString() + '</td>'
+ '</tr>';
}
table += '</tbody></table>';
// 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
var html = "<html><head><meta charset='utf-8' /></head><body>" + table + "</body></html>";
// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
var blob = new Blob([html], { type: "application/vnd.ms-excel" });
var a = document.getElementById("aExportData");
// 利用URL.createObjectURL()方法为a元素生成blob URL
a.href = URL.createObjectURL(blob);
// 设置文件名
a.download = "里程报表.xls";
$("#aExportData span").click();
}
catch (ex) {
catchTheException("ImportToExcel", ex);
}
};
