个人中心
gpt4 book ai didi

javascript - 使用 HTML/css/javascript(响应式设计)打印宽 html 表格

转载 作者：行者123 更新时间：2023-11-28 17:18:42 24 4
gpt4 key购买 nike

我已经尝试了 article 中的代码在单个页面中打印我的宽表，这只适用于谷歌浏览器。如文章和评论中所述，无法使其在 IE 上运行。下面是我使用 IE 的示例代码，我尝试了将近几个小时但无法解决问题。

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();
}

最佳答案

尝试了不同的打印解决方案，如此处的演示所示 http://salman-w.blogspot.com/2013/04/printing-wide-html-tables.html .成功了!

注意:我使用的是 Kendo 网格，下面的解决方案非常有效!这有一些额外的过滤器显示 stuff.etc。如果不需要，请将其删除。我确信它可以被优化，但这是有效的快速代码。

    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;
        });

    }

干杯，斯里尼

关于javascript - 使用 HTML/css/javascript(响应式设计)打印宽 html 表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28184127/

24 4 0
文章推荐： javascript - 命名空间未定义
文章推荐： html - 从wordpress更改网站结构
文章推荐： css - 选择一个深度嵌套的 div
文章推荐： javascript - 尝试使用 javascript/jquery 查找 Canvas 的高度
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com