使用html/css/javascript打印宽html表格（具有响应性设计）
我曾经尝试过在一个页面中打印我的宽表的代码，这只适用于谷歌浏览器。无法使其在文章和评论中提到的IE上工作。下面是我在IE上的示例代码，我尝试了几个小时都没有解决这个问题使用html/css/javascript打印宽html表格（具有响应性设计）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我曾经尝试过在一个页面中打印我的宽表的代码，这只适用于谷歌浏览器。无法使其在文章和评论中提到的IE上工作。下面是我在IE上的示例代码，我尝试了几个小时都没有解决这个问题 function printGrid() { var gridElement = $('#grid'), printableContent = '', win = window.open('', '', 'scrollbars=1,resizable=1,width=1150,height=650,left=
function printGrid() {
var gridElement = $('#grid'),
printableContent = '',
win = window.open('', '', 'scrollbars=1,resizable=1,width=1150,height=650,left=0,top=0'),
doc = win.document.open(),
dataSource = $("#grid").data("kendoGrid").dataSource;
var htmlStart =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8" />' +
'<link href="../Content/kendo/2014.1.318/kendo.common.min.css" rel="stylesheet" />' +
'<style>' +
'html { font: 11pt sans-serif; }' +
'.k-grid { border-top-width: 0;}' +
'.k-grid, .k-grid-content { height: auto !important;}' +
'.k-grid-content { overflow: visible !important; }' +
'div.k-grid table { table-layout: fixed; border:1px solid #000000; width: 100% !important; }' +
'.k-grid .k-grid-header th { border-top: 1px solid; border:1px solid #000000;}' +
'.k-grid td {border:1px solid #000000;} ' +
'.k-grid-toolbar, .k-grid-pager > .k-link { display: none; }' +
'@media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px) {table, thead, tbody, th, td, tr { display:block;width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;float:left;clear:left;}' +
'thead tr {position: absolute;top: -9999px;left: -9999px;}' +
'tr {border: 1px solid #ccc;}' +
'td {border: none;border-bottom: 1px solid #eee;position: relative;padding-left: 50%;height:10px;}' +
'td:before {position: absolute;top: 6px;left: 6px;width: 45%;padding-right: 10px;white-space: nowrap;}' +
'td:nth-of-type(1):before {content: "Column1";}' +
'td:nth-of-type(1):before {content: "Column2";}' +
'td:nth-of-type(1):before {content: "Column3";}' +
'td:nth-of-type(1):before {content: "Column4";}' +
'td:nth-of-type(1):before {content: "Column5";}' +
'td:nth-of-type(1):before {content: "Column6";}' +
'td:nth-of-type(1):before {content: "Column7";}' +
'td:nth-of-type(1):before {content: "Column8";}' +
'td:nth-of-type(1):before {content: "Column9";}' +
'td:nth-of-type(1):before {content: "Column10";}' +
'td:nth-of-type(1):before {content: "Column11";}' +
'td:nth-of-type(1):before {content: "Column12";}' +
'td:nth-of-type(1):before {content: "Column13";}' +
'td:nth-of-type(1):before {content: "Column14";}' +
'td:nth-of-type(1):before {content: "Column15";}' +
'}' +
'@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {' +
'body {padding: 0;margin: 0;width: 320px;}' +
'}' +
'@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {' +
'body {width: 495px;}' +
'}' +
'</style>' +
'</head>' +
'<body>';
var htmlEnd =
'</body>' +
'</html>';
var gridHeader = gridElement.children('.k-grid-header');
if (gridHeader[0]) {
var thead = gridHeader.find('thead').clone().addClass('k-grid-header');
printableContent = gridElement
.clone()
.children('.k-grid-header').remove()
.end()
.children('.k-grid-content')
.find('table')
.first()
.children('tbody').before(thead)
.end()
.end()
.end()
.end()[0].outerHTML;
} else {
printableContent = gridElement.clone()[0].outerHTML;
}
doc.write(htmlStart + printableContent + htmlEnd);
doc.close();
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/ ') >= 0;
var isChrome = !!window.chrome && !isOpera;
if (!isChrome)
win.print();
}
尝试了不同的打印解决方案，如演示所示。成功了 注意：我使用的是剑道网格，下面的解决方案非常有效！这有一些额外的过滤器显示内容等。如果不需要，请将其删除。我相信它可以优化，但这是一个快速有效的代码
function printGrid() {
var gridElement = $('#grid'),
firstprintableContent = '',
lastprintableContent = '',
win = window.open('', '', 'scrollbars=1,resizable=1,width=1150,height=650,left=0,top=0'),
doc = win.document.open(), dataSource = $("#grid").data("kendoGrid").dataSource;
//get the filter values
var filterHtml = "", operator = "", fieldName = "", localCounter = 0;;
var fieldArray = new Array("Field1", "Field2", "Field3", "Field4", "Field5", "Field6", "Field7", "Field8", "Field9", "Field10", "Field11", "Field12", "Field13", "Field14", "Field15");
var nameArray = new Array("Column1", "Column2", "Column3", "Column4", "Column5", "Column6", "Column7", "Column8", "Column9", "Column10", "Column11", "Column12", "Column13", "Column14", "Column15");
//Logic for getting the filters and displaying them on the print page
var currentFilter = dataSource.filter();
if (currentFilter) {
currentFilter.filters.forEach(function (filter, index) {
localCounter = localCounter + 1;
if (filter.operator == "neq")
operator = "not equals to";
if (filter.operator == "eq")
operator = "equals to";
if (filter.operator == "startswith")
operator = "starting with";
for (var iCounter = 0; iCounter < 15; iCounter++) {
if (filter.field == fieldArray[iCounter]) {
fieldName = nameArray[iCounter];
break;
}
}
if (localCounter > 1)
filterHtml += "<p style='padding-left:9.1em'>" + fieldName + " " + operator + " " + "'" + filter.value + "'" + "</p>";
else
filterHtml += fieldName + " " + operator + " " + "'" + filter.value + "'" + "<br/> ";
});
}
else
filterHtml = "None";
var htmlStart =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8" />' +
'<style>' +
'html { font: 11pt sans-serif; }' +
'table { width: 100%; border-collapse: collapse;table-layout:fixed;}' +
'tr:nth-of-type(odd) { background: #eee;}' +
'th { background: #DDDDDD;white-space: nowrap; color: white; font-weight: bold; pointer-events:none;cursor:default;text-decoration:none;}' +
'td, th { padding: 6px; border: 1px solid #ccc; text-align: left;outline:1px solid #ccc}' +
'tr {border: 1px solid #ccc;}' +
'</style>' +
'</head>' +
'<body>' +
'<div class="site-header__logo col-xs-4">' +
'<img src="/Content/images/mark-red-48x52.png" alt=" Products">' +
'<img src="/Content/images/logo-299x63.png" alt="Products">' +
'</div>' + '<br/><br/>' +
'Applied Data Filters' + ':' + " " + filterHtml + '<br/>' +
'<center><strong><h2>' + 'My grid' + '</h2></strong> </center>' + '<br/>';
var htmlEnd = '</body>' + '</html>';
//get the total columns, hidden columns and shown columns
var totalColumns = $("#grid").data("kendoGrid").columns.length;
var hiddencolumnsarray = [];
var showncolumnsarray = [];
if (totalColumns > 0) {
for (i = 0; i < totalColumns; i++) {
if ($("#grid").data("kendoGrid").columns[i].hidden) {
hiddencolumnsarray.push(i);
}
else {
showncolumnsarray.push(i);
}
}
}
if (showncolumnsarray.length > 8) {
iMoreColumns = 1;
//show only the first eight columns if user is viewing more than 8 columns
printfirsteightcolumns();
firstprintableContent = getPrintableContent(gridElement);
printlastsevencolumns();
lastprintableContent = getPrintableContent(gridElement);
} else {
iMoreColumns = 0;
firstprintableContent = getPrintableContent(gridElement);
}
//set the columns visibility back to normal once the print HTML is captured with the respective number of columns
printshowhidecolumns();
if (showncolumnsarray.length > 8)
doc.write(htmlStart + firstprintableContent + "<br/>" + "<div style='page-break-before:always;'>" + lastprintableContent + "</div>" + htmlEnd);
else
doc.write(htmlStart + firstprintableContent + htmlEnd);
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/ ') >= 0;
var isChrome = !!window.chrome && !isOpera;
if (!isChrome)
win.print();
}
function getPrintableContent(gridElement) {
var gridHeader = gridElement.children('.k-grid-header');
if (gridHeader[0]) {
var thead = gridHeader.find('thead').clone().addClass('k-grid-header');
printableContent = gridElement.css('height', '')
.clone()
.children('.k-grid-header').remove()
.end()
.children('.k-grid-content').css('height', '')
.find('table')
.first()
.children('tbody').before(thead)
.end()
.end()
.end()
.end()[0].outerHTML;
} else {
printableContent = gridElement.clone()[0].outerHTML;
}
return printableContent;
}
function printfirsteightcolumns() {
var counter = 0;
var columns = $("#grid").data("kedoGrid").columns;
jQuery.each(columns, function (index) {
if (counter > 8) {
$("#grid").data("kendoGrid").hideColumn(parseInt(counter));
}
counter = counter + 1;
});
}
function printlastsevencolumns() {
var counter = 0;
var columns = $("#grid").data("kedoGrid").columns;
jQuery.each(columns, function (index) {
if (counter > 8) {
$("#grid").data("kendoGrid").showColumn(parseInt(counter));
}
else {
$("#grid").data("kendoGrid").hideColumn(parseInt(counter));
}
counter = counter + 1;
});
}
”+字段名+“”+运算符+“”+“”+“”“+”filter.value+“+”“+”
”； 其他的 filterHtml+=fieldName+“”+运算符+“”+“”+filter.value+“+”“+””； }); } 其他的 filterthtml=“无”； var htmlStart=