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中的即时通讯.由于当时走的太急,忘记把代码拿出来.想想这已经是大半年前的事情了,时间过 ...
随机推荐
- html+css第八篇滑动门和可爱的css精灵
滑动门: 滑动门并不是一项全新的技术,它是利用背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果. CSS精灵 CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处 ...
- DP+单调队列详解+题目
介绍: 单调队列优化的原理 先回顾单调队列的概念,它有以下特征: (1)单调队列的实现.用双端队列实现,队头和队尾都能插入和弹出.手写双端队列很简单. (2)单调队列的单调性.队列内的元素 ...
- CF1592F2 Alice and Recoloring 2
目前在看贪心/构造/DP 杂题选做,发现一道非常不错的结论题,具有启发意义. 先说明如下结论 结论一:如何怎么样都不会使用二和三操作 证明: 二三操作显然可以通过两次一操作达到,而其操作费用大于两次一 ...
- Codeforces 538G - Berserk Robot（乱搞）
Codeforces 题目传送门 & 洛谷题目传送门 一道很神的乱搞题 %%% 首先注意到如果直接去做,横纵坐标有关联,不好搞.这里有一个非常套路的技巧--坐标轴旋转,我们不妨将整个坐标系旋转 ...
- 9 Days 停课修炼题解集
xj4604 排序 \(n,k <= 1e5\). 先考虑二分出这个值,check 有多少段的平均值小于这个 mid,这个在之前的复活赛中是原题 T4,数形结合,$ \text{Average} ...
- python飞机大战
'''新手刚学python,仿着老师敲的代码.1.敌方飞机只能左右徘徊(不会往下跑)并且不会发射子弹.2.正在研究怎么写计分.3.也参考了不少大佬的代码,但也仅仅只是参考了.加油!''' import ...
- 阿里云ECS磁盘性能测试
阿里官方给出的性能指标 顺序读 测试命令 fio -directory=/var/lib/data -direct=1 -iodepth=1 -thread -ioengine=libaio -ran ...
- 【风控算法】一、变量分箱、WOE和IV值计算
一.变量分箱 变量分箱常见于逻辑回归评分卡的制作中,在入模前,需要对原始变量值通过分箱映射成woe值.举例来说,如"年龄"这一变量,我们需要找到合适的切分点,将连续的年龄打散到不同 ...
- 一文搞懂指标采集利器 Telegraf
作者| 姜闻名 来源|尔达 Erda 公众号 导读:为了让大家更好的了解 MSP 中 APM 系统的设计实现,我们决定编写一个<详聊微服务观测>系列文章,深入 APM 系统的产品.架构 ...
- day08 外键字段的增删查改
day08 外键字段的增删查改 今日内容概要 外键字段的增删查改 正反向查询的概念 基于对象的跨表查询(子查询) 基于双下划线的跨表查询(连表操作) 聚合查询与分组查询 F查询和Q查询 前提准备 cl ...