Kendo UI for jQuery数据管理使用教程：打印

Kendo UI for jQuery R2 2020 SP1试用版下载

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

打印

即使Grid的内容可能不是页面上的唯一内容，Grid也提供忽略页面其余部分并仅打印其内容的选项。

要仅从页面上打印Grid，请使用以下两种方法：

打印现有页面，并使用打印CSS隐藏不相关的内容。
打印仅带有Grid的单独网页。

打印现有网页

若要仅将Grid作为现有网页的一部分进行打印，请使用打印样式表隐藏页面中不需要的部分，确切的CSS打印取决于现有页面内容。

打印新网页

下面的示例演示如何检索Grid的HTML，如何将其注入到新的浏览器窗口中以及打印新页面。此方法还解决了以下重要问题：

Grid是可滚动的，则某些行或列在打印的纸张上可能不可见。因此，在易于打印的页面上禁用Grid高度和可滚动性。
根据列的宽度，某些单元格内容可能会被剪裁而无法完全看到。通过强制对Grid表强制使用自动表布局（可禁用省略号（...）），可以解决此问题。
如果启用了滚动（除Grid的MVC封装器以外，默认情况下已设置滚动），则Grid会为标题区域呈现一个单独的表。因为浏览器不关联两个Grid表，所以它不会在每个打印页面的顶部重复标题行。下面的示例演示了如何通过将标题表行复制到数据表中来解决此问题。
当您打印具有锁定（冻结）列的Grid时，结果列或行可能未对齐，或者整体布局可能损坏。在这种情况下，请使用没有冻结列的单独的打印友好的Grid实例。

<div id="grid"></div>

<script type="text/x-kendo-template" id="toolbar-template">
<button type="button" class="k-button" id="printGrid">Print Grid</button>
</script>

function printGrid() {
var gridElement = $('#grid'),
printableContent = '',
win = window.open('', '', 'width=800, height=500, resizable=1, scrollbars=1'),
doc = win.document.open();

var htmlStart =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8" />' +
'<title>Kendo UI Grid</title>' +
'<link href="https://kendo.cdn.telerik.com/' + kendo.version + '/styles/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: auto; width: 100% !important; }' +
'.k-grid .k-grid-header th { border-top: 1px solid; }' +
'.k-grouping-header, .k-grid-toolbar, .k-grid-pager > .k-link { display: none; }' +
// '.k-grid-pager { display: none; }' + // optional: hide the whole pager
'</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();
win.print();
}

$(function () {
var grid = $('#grid').kendoGrid({
dataSource: {
type: 'odata',
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
toolbar: kendo.template($('#toolbar-template').html()),
height: 400,
pageable: true,
columns: [
{ field: 'ProductID', title: 'Product ID', width: 100 },
{ field: 'ProductName', title: 'Product Name' },
{ field: 'UnitPrice', title: 'Unit Price', width: 100 },
{ field: 'QuantityPerUnit', title: 'Quantity Per Unit' }
]
});

$('#printGrid').click(function () {
printGrid();
});

});

了解最新Kendo UI最新资讯，请关注Telerik中文网！

来源：oschina

链接：https://my.oschina.net/u/3992677/blog/4473452

标签

kgrid