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);
}
};
MVC中的打印功能的更多相关文章
- 在react中实现打印功能
最近项目中,前端采用react+antd+dva的组合,已经完成了后头管理类系统产品的更新迭代工作. 今天有一个新需求,需要在后台管理系统中实现点击打印完成指定页面的打印功能. 之前也没接触过,只知道 ...
- 在你的ASP.NET MVC中使用查找功能
在程序中,使用查找功能是少之不了.今天在ASP.NET环境下演示一回. 在cshtml视图中,有三个文本框,让用户输入关键词,然后点击最右连的“搜索”铵钮,如果有结果将显示于下面. Html: 表格放 ...
- vue项目中增加打印功能
export default function printFile(html) { let userAgent = navigator.userAgent; if ( (userAgent.index ...
- Android 各层中日志打印功能的应用
1. HAL层 头文件:#include <utils/Log.h> 对应的级别 打印方法 VERBOSE LOGV()DEBUG LOGD()INFO LOGI()WARN LOGW() ...
- 关于mvc中@Html.DropDownListFor和@Html.DropDownList默认值无法选中问题简单总结
当我们在做类似编辑功能的时候,会给定select选中默认值,然而mvc中偶尔这个功能不能用,或者是强类型的@Html.DropDownListFor不能用.凑巧今天遇到问题,解决问题时发现了mvc的一 ...
- vc 实现打印功能
Visual C++6.0是开发Windows应用程序的强大工具,但是要通过它实现程序的打印功能,一直是初学者的一个难点,经常有朋友询问如何在VC中实现打印功能,他们往往感到在MFC提供的框架内实现这 ...
- ASP.NET MVC中实现属性和属性值的组合,即笛卡尔乘积01, 在控制台实现
在电商产品模块中必经的一个环节是:当选择某一个产品类别,动态生成该类别下的所有属性和属性项,这些属性项有些是以DropDownList的形式存在,有些是以CheckBoxList的形式存在.接着,把C ...
- MFC 实现打印机打印功能
Visual C++6.0是开发Windows应用程序的强大工具,但是要通过它实现程序的打印功能,一直是初学者的一个难点,经常有朋友询问如何在VC中实现打印功能,他们往往感到在MFC提供的框架内实现这 ...
- MVC中使用SignalR打造酷炫实用的即时通讯功能附源码
前言,现在这世道写篇帖子没个前言真不好意思发出来.本贴的主要内容来自于本人在之前项目中所开发的一个小功能,用于OA中的即时通讯.由于当时走的太急,忘记把代码拿出来.想想这已经是大半年前的事情了,时间过 ...
随机推荐
- java 装饰器模式实现代码
目录 1.实现装饰器模式 1.1.公共接口 1.2.接口实现 1.3.装饰器 1.4.装饰构件 1.5.测试装饰器 上图展示的是io流中的一个装饰者模式的代码结构 1.实现装饰器模式 汽车厂生产汽车实 ...
- GraalVM最佳实践，使用Java开发CLI、Desktop(JavaFX)、Web(SpringBoot)项目，并使用native-image技术把Java代码静态编译为独立可执行文件（本机映像）
原创文章,转载请注明出处! 源码地址: Gitee Gtihub 介绍 GraalVM最佳实践,使用Java开发CLI.Desktop(JavaFX).Web(SpringBoot)项目,并使用nat ...
- CF187D BRT Contract
考虑如果哪次经过了红灯则显然已经和出发的时间没关系了. 然后我们需要做的是怎么样找到最近的一个是红灯的点. 然后实际下是我们做一个前缀和:\(L_i = \sum d_i\) 然后求\(\min (L ...
- 【豆科基因组】普通豆/菜豆/四季豆Common bean (Phaseolus vulgaris L.) 基因组
目录 研究一:G19833组装,2014NG 研究二:BAT 93组装,2016 genome biology 菜豆属(Phaseolus L.)为同源二倍体作物,包含有80 多个物种,多数为野生种, ...
- CentOS6.9安装python3
安装依赖包: yum install -y openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel w ...
- 笔记Mysql（1）
客户端的登录命令 查看版本 查看设置(数据库的基本设置信息) 查看时间 查看链接数 查看超时的关键字 创建数据库 查看已有数据库 进入数据库,查询链接到的数据库 查询数据目录 创建表 查看表
- 学习java 7.2
学习内容:案例一:斐波那契数列从1开始作为第一个数,求第20个数 public class Test { public static void main(String[ ] args){ int[ ] ...
- 学习java 7.17
学习内容: 计算机网络 网络编程 网络编程三要素 IP地址 端口 协议 两类IP地址 IP常用命令: ipconfig 查看本机IP地址 ping IP地址 检查网络是否连通 特殊IP地址: 127. ...
- Hadoop org.apache.hadoop.util.DiskChecker$DiskErrorException问题等价解决linux磁盘不足解决问题排查
org.apache.hadoop.util.DiskChecker$DiskErrorException问题等价解决linux磁盘不足解决问题排查 解决"/dev/mapper/cento ...
- mybatis-plus条件构造用is开头的Boolean类型字段时遇到的问题
is打头的Boolean字段导致的代码生成器与lambda构造器的冲突 https://gitee.com/baomidou/mybatis-plus/issues/I171DD?_from=gite ...