打印剑道网格中的所有页面答案

【问题标题】：Print all pages in kendo grid打印剑道网格中的所有页面
【发布时间】：2016-02-04 14:30:27
【问题描述】：

我正在尝试打印剑道网格的所有页面我搜索了很多我使用了这个链接 http://docs.telerik.com/KENDO-UI/controls/data-management/grid/walkthrough#printing

打印网格，但它打印当前页面。像这样

注意链接名称仍然显示为链接，用户可以在打印页面中按下它。

我尝试使用此代码加载所有页面，但它不起作用，因为它显示打印页面然后加载所有页面项目的网格

 var dataSource = gridElement.data("kendoGrid").dataSource;
    dataSource.pageSize(dataSource.total());

我想以友好的布局打印网格的所有页面，比如一个导出网格到 pdf 它导出友好的网格进行打印

编辑 1

这是我打印所有网格页面的脚本，但它不起作用

$('#printGrid').click(function () {
    printGrid();
});
function printGrid() {
    var gridElement = $('#PageGrid'),
        printableContent = '',
        win = window.open('', '', 'width=800, height=500');
    var dataSource = gridElement.data("kendoGrid").dataSource;
    dataSource.pageSize(dataSource.total());

    var htmlStart =
       '<!DOCTYPE html>' +
       '<html>' +
       '<head>' +
       '<link href="http://kendo.cdn.telerik.com/' + kendo.version + '/styles/kendo.common.min.css" rel="stylesheet" /> ' +
       '<meta charset="utf-8" />' +
       '<title>@GlobalResources.Print</title>' +
       '<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-grid-toolbar, .k-grid-pager > .k-link { display: none; }' +
       '</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 = win.document.open();
    doc.write(htmlStart + printableContent + htmlEnd);
    doc.close();
    win.print();

}

【问题讨论】：

更新并放置我的代码

标签： kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

var gridElement = $('#PopUpGrid'),
             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="http://kendo.cdn.telerik.com/' + kendo.version + '/styles/kendo.common.min.css" rel="stylesheet" /> ' +
             '</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].innerHTML;
         } else {
             printableContent = gridElement.clone()[0].innerHTML;
         }

         doc.write(htmlStart + printableContent + htmlEnd);
         doc.close();
         win.print();
     }

我希望你觉得它有用。随时评论我的错误谢谢。

【讨论】：