个人中心
gpt4 book ai didi

javascript - Chrome 中的 HTML 表格分页符打印

转载 作者：行者123 更新时间：2023-11-28 06:26:49 24 4
gpt4 key购买 nike

这个问题弄得我头皮发麻，有没有办法动态拆表，在下一页显示表头？

事实是，这是一份报告，我不知道它会在屏幕上显示多少行，我正在使用 AngularJS 获取信息并显示在屏幕上。

那是我的页面:

Page

打印时:

Print

这是我的 HTML 页面

<!DOCTYPE html>
<html>
<head>
    <!-- #INCLUDE VIRTUAL="/wvdf_bib/BIB/Includes/bHtmlHead.inc"-->
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-8">
                <div class="col-xs-4">
                    <br />
                    <img class="col-xs-12" src="http://www.cargoweber.com/logos/profile/mepl-international-llc-logo-dubai-dub-916.png" />
                </div>
                <div class="col-xs-8">
                    <h3>Demo Company</h3>
                    <p>
                        John Smith<br />
                        demo@demo1.com<br />
                        http://www.demo1.com<br />
                        Phone: Tel: +1-908-301-6025
                    </p>
                </div>
            </div>

            <div class="col-xs-4">
                <h1>Rate quote</h1>
                <h5>Created on 17 Jun 2015</h5>
                <p>Document Number #LCL FCLJS150617003-1</p>
                <small>As of date <strong>17 Jun 2015</strong></small><br />
                <small>Valid until <strong>17 Jul 2015</strong></small>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-6">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th class="col-xs-6">To</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="col-xs-5">
                                    <br />
                                    <img class="col-xs-12" src="http://www.cocacola.pt/19201201/jopt/post_images/standard/detail_lbITzYnZakM0pchLQsx9frA8wmHFdO.png" />
                                </div>
                                <div class="col-xs-7">
                                    <h3>Coca Cola</h3>
                                    <p>
                                        http://www.cocacola.com
                                    </p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row>
            <div class="col-xs-12">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <td colspan="7"></td>
                            <td colspan="3">Total Ocean Freight Sum Up</td>                             
                        </tr>
                        <tr>
                            <th>POL</th>
                            <th>Carrier</th>
                            <th>POD</th>
                            <th>VIA Port</th>
                            <th>Effective date</th>
                            <th>Expiry date</th>
                            <th>Transit time</th>
                            <th>Container20</th>
                            <th>Container40</th>
                            <th>Container40HC</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>CNYTN Port of Yantian</td>
                            <td>NYK Line</td>
                            <td>USLAX Los Angeles</td>
                            <td></td>
                            <td>5/17/15</td>
                            <td>5/17/16</td>
                            <td>20 days</td>
                            <td>USD 1,235.00</td>
                            <td>USD 1,627.00</td>
                            <td>USD 1,627.00</td>
                        </tr>
                        <tr>
                            Another x rows
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

问题是:我需要在新页面上再次打印 thead，但我无法让它工作 =(

有谁知道我该如何解决这个问题？

最佳答案

这张 table 是做什么用的？打印？如果是这样，您可以使用 JavaScript 从现有的表格元素创建一个新表格。您可以使用 JS 拆分关闭并在 X 行后创建一个新表。最终结果将是您的原始表格，转换为多个表格，每个表格包含 X 行数。这将使您能够在每页上使用相同的标题打印它。

这是我使用的...您可以根据需要修改它。基本上，只需执行一些......

<table id="myTable">
stuff
</table>
<div id="myNewTable"></div>

<script>
var myNewTable = separateTables('myTable','20');
document.getElementById("myNewTable").innerHTML = myNewTable;

    function separateTables(table,rowLimit) {
        /* Initialize variables */
        var $table = $("#"+table);
        var $headerCells = $table.find("thead th");
        var $footerCells = $table.find("tfoot tr");
        var $rows = $table.find("tbody tr");
        var pageBreak = '<div style="page-break-before:always">&nbsp;</div>';        
        var headers = [], footers = [], rows = [];

        /* Add all header cells to headers array */ 
        $headerCells.each(function() {
            headers.push(this.outerHTML);
        });

        /* Add all rows in tbody to rows array */
        $rows.each(function(){
            rows.push(this.outerHTML);
        });

        /* Create table opening structure */
        var el = document.getElementById(table);
        var attr = [];
        var vals = [];
        for (var i=0, attrs=el.attributes, l=attrs.length; i<l; i++)
        {
            attr.push(attrs.item(i).nodeName);
            vals.push(attrs.item(i).nodeValue);
        }
        var table = '<table ';
        for(x=0;x<attr.length;x++)
        {
            //Ignore cellpadding & cellspacing - set both to zero to prevent issues
            if(attr[x].toString().toLowerCase() == 'cellspacing' || attr[x].toString().toLowerCase() == 'cellpadding')
            {
                vals[x] = "0";
            }
            table += attr[x]+'="'+vals[x]+'" ';
        }
        table += '>';

        /* Create header structure */
        var header = '<thead><tr>';
        for(x=0;x<headers.length;x++)
        {
            header += headers[x];
        }
        header += '</tr></thead>';

        /* Create footer structure */
        $footerCells.each(function(){
            footers.push(this.outerHTML);
        });
        var footer = '<tfoot>';
        for(x=0;x<footers.length;x++)
        {
            footer += footers[x];
        }
        footer += '</tfoot>';

        /* Create our tables */
        var newOutput = table + header + '<tbody>';

        /* Loop over rows and create new table after count hits rowLimit */
        var iCount = 0;
        for (x=0;x<rows.length;x++)
        {
            iCount += 1;
            newOutput += rows[x];
            if(iCount == rowLimit)
            {
                newOutput += '</tbody></table>'+pageBreak+table+header+'<tbody>';
                iCount = 0;
            }
        }
        /* Close remaining table structure and return value */
        newOutput += '</tbody>'+footer+'</table>';
        return newOutput;       
    }
</script>

关于javascript - Chrome 中的 HTML 表格分页符打印，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35230903/

24 4 0
文章推荐： javascript - 根据哈希 url 参数在页面加载时加载内容
文章推荐： html - 定位导航栏，使其固定
文章推荐： html - 基础菜单溢出手机
文章推荐： javascript - ngRoute 传递参数不起作用
行者123
个人简介

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

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