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中的即时通讯.由于当时走的太急,忘记把代码拿出来.想想这已经是大半年前的事情了,时间过 ...
随机推荐
- bilibili动画下载视频批量改名（python）
bilib应用 在微软商店中下载哔哩哔哩动画,虽然软件UI古老,但是贵在稳定和支持下载 安装以后搜索自己想要的视频,然后缓存下载 下载后进入下载的路径 视频文件重命名 打开自动命令的程序或者py脚本, ...
- 当 dotnet-monitor 遇上 Prometheus, 是种什么样的体验？
对于开发和运维人员来说, 监控大屏很棒, 让我们来做一个 Dashboard 吧! 大家可能听说过一些 CLI 诊断工具, 比如 dotnet-counters,dotnet-dump 和 dotne ...
- BZOJ 3694&&DTOJ 1972: 最短路
题目描述 给出一个n个点m条边的无向图,n个点的编号从1~n,定义源点为1.定义最短路树如下:从源点1经过边集T到任意一点i有且仅有一条路径,且这条路径是整个图1到i的最短路径,边集T构成最短路树. ...
- shell 基本系统维护指令
笔记 [1]man.passwd.su.echo命令的用法 (1)获取联机帮助 1)使用man命令可以找到特定的联机帮助页,并提供简短的命令说明.一般语法格式为: man commandname 2) ...
- Linux命令行批量删除文件（目录）
快速-批量删除文件或目录 1-1.快速删除大文件夹(注意目录后的结束符'/')(对于含有海量文件的目录,不能直接rm -rf删除,这样效率很慢:) rsync -a --delete blank/ t ...
- TOMCAT 搭建
第一步:下载 软件 和 JDK 第二个:https://www.oracle.com/java/technologies/javase-jdk16-downloads.html 传输到Linux里. ...
- 8.深入TiDB：解析Hash Join实现原理
本文基于 TiDB release-5.1进行分析,需要用到 Go 1.16以后的版本 我的博客地址:https://www.luozhiyun.com/archives/631 所谓 Hash Jo ...
- 使用 Skywalking 对 Kubernetes（K8s）中的微服务进行监控
1. 概述 老话说的好:任何成功都不是轻易得来的,是不断地坚持与面对的结果. 言归正传,之前我们聊了 SpringCloud 开发的微服务是如何部署在 Kubernetes(K8s)集群中的,今天我 ...
- 从零构建Java项目（Maven+SpringBoot+Git） #02 奥斯丁项目
前两天我说要写个项目来持续迭代,有好多小伙伴都表示支持和鼓励,项目的第一篇这不就来了么~我给项目取了个名字,英文名叫做:austin,中文名叫做:奥斯丁 名字倒没有什么特别的含义,我单纯觉得这个名字好 ...
- linux 实用指令时间日期类
linux 使用指令时间日期类 data 显示当前日期 基本语法 date 显示当前时间 date+%Y 显示当前年份 date+%m 显示当前月份 date+%d 显示当前是哪一天 date &qu ...