Table打印 根据高度自动分页

最新推荐文章于 2024-06-06 17:25:14 发布
最新推荐文章于 2024-06-06 17:25:14 发布
阅读量1.1w 收藏 14
点赞数 2
分类专栏： JS HTML 文章标签： html 分页 根据高度分页 table分页 js分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzh1063/article/details/49678287
版权
JS 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
HTML
1 篇文章 0 订阅
订阅专栏

最近打印单据，遇到表头不变，Table主体每行高度不固定，打印时 Table自动分页。


网上查了一下 好像都是根据行数来分页的，但是那些行高都是固定的。

查了一些资料，自己整理了一下思路，没分页之前，整个区域分成三个部分，标题，正文，和页脚。在后台 先把这个HTML生产好， 标题和页脚固定不变，主要是对正文进行分页。

正文部分，计算每行高度，判断是否超出一页的高度，超出换页。

下面贴出自己写的HTML页面和js部分

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../../themes/bootstrap/easyui.css" rel="stylesheet" />
    <link rel="shortcut icon" type="image/ico" href="../../images/favicon.ico" />
    <link href="../../themes/bootstrap/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/icon.css" rel="stylesheet" type="text/css" />
    

    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }

        .bor {
            border-color: Black;
            border-style: dotted;
            border-width: 0px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            margin: 0;
            padding: 0;
            font-size: 16px;
            border-spacing: 1px;
            border-collapse: separate;
            width: 100%;
            margin-top: 10px;
            text-align:left;
        }

            .bor td {
                border-color: Black;
                border-style: dotted;
                border-width: 0px;
                border-top-width: 1px;
                border-left-width: 1px;
                padding: 2px;
                word-wrap :break-word;
		        word-break :break-all;
                table-layout:fixed;
            }

            .bor th {
                border-color: Black;
                border-style: dotted;
                border-width: 0px;
                border-top-width: 1px;
                border-left-width: 1px;
                padding: 3px;
                text-align:center;
            }

        .title {
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            vertical-align: central;
        }

        .tableHeadTDLeft {
            width: auto;
            text-align: right;
        }

        .tableHeadTDRight {
            width: auto;
            text-align: left;
        }

        .tableFootLeft {
            width: 100px;
            text-align: right;
        }

        .tableFootRight {
            border-bottom: 1px solid #e9e9e9;
            background-color: #fff;
            display: block;
            padding-top: 15px;
            width: 100px;
        }
    </style>





    <script src="../../js/jquery.min.js" type="text/javascript"></script>
    <script src="../../js/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../../js/common.js" type="text/javascript"></script>
    <script src="../../js/init.js" type="text/javascript"></script>
    <script src="../../js/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script src="../../js/printer_Grid.js"></script>
    <script src="../../js/backspace_control.js"></script>
    <script src="../../js/DateFormat.js"></script>
    <script src="../../js/wms_printdocuments.js"></script>
    <script type="text/javascript">

        function init() {
            var totalHeight = 370;
            
            var doc_no = getUrlParam('doc_no');
            var hid_t = "";
            var hid_h = "";
            var hid_f = "";
            var hid_f_ex = "";
            var rows;

            $.ajax({
                url: "../../ashx/wms/Purchase.ashx?action=getPurchaseArrivalPrinter",
                data: { doc_no: doc_no },
                type: "POST",
                dataType: "text",
                async: false,
                success: function (data) {
                    strs = new Array();
                    strs = data.split("|-|");
                    hid_t = strs[0]; //document.getElementById('hid_t').value;
                    hid_h = strs[1]; //document.getElementById('hid_h').value;
                    hid_f = strs[2]; //document.getElementById('hid_f').value;
                    hid_f_ex = strs[3]; //document.getElementById('hid_f_ex').value;
                    $("#div_1").html(strs[4]);
                    //rows = $('#t_detail')[0].rows.length;//document.getElementById('t_detail').rows.length;
                    rows = $('#t_detail')[0].rows;
                }
            });
            //打印分页
            AutoPage.init(hid_t + hid_h, "t_detail", hid_f, totalHeight, "bor", "div_1",1);
            
        }

        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }

    </script>

    

</head>
<body>
    <div style="width: 980px; text-align: center;">
        <div id="div_1" style="width: 100%"></div>
    </div>
    <script>
        document.onload = init();
    </script>
</body>

</html>

//打印自动分页JS
AutoPage = {
    header: null,//页面顶部显示的信息
    content: null,//页面正文TableID
    footer: null,//页面底部
    totalHeight: null,//总的高度
    tableCss: null,//正文table样式
    divID:null,//全文divID

    init: function (header, content, footer,totalHeight,tableCss,divID,type) {
        AutoPage.header = header;
        AutoPage.content = content;
        AutoPage.footer = footer;
        AutoPage.totalHeight = totalHeight;
        AutoPage.tableCss = tableCss;
        AutoPage.divID = divID;
        //初始化分页信息
        if (type == 1)
            AutoPage.initPageSingle();
        else if (type == 2)
            AutoPage.initPageDouble();
        //隐藏原来的数据
        AutoPage.hidenContent();
        //开始分页
        //AutoPage.beginPage();

    },
    //分页 重新设定HTML内容(单行)
    initPageSingle: function () {

        var tmpRows = $("#" + AutoPage.content)[0].rows; //表格正文
        var height_tmp = 0; //一页总高度
        var html_tmp = "";  //临时存储正文
        var html_header = "<table class='"+AutoPage.tableCss+"'>";
        var html_foot = "</table>";
        var page = 0; //页码

        var tr0Height = tmpRows[0].clientHeight; //table标题高度
        var tr0Html =  "<tr>" + tmpRows[0].innerHTML + "</tr>";//table标题内容
        height_tmp = tr0Height;
        for (var i = 1; i < tmpRows.length ; i++) {
            var trHtmp = tmpRows[i].clientHeight;//第i行高度
            var trMtmp = "<tr>" + tmpRows[i].innerHTML + "</tr>";//第i行内容

            height_tmp += trHtmp;
            if (height_tmp < AutoPage.totalHeight) {
                if (height_tmp == tr0Height + trHtmp) {
                    html_tmp += AutoPage.header + html_header + tr0Html;
                    page++;//页码
                }
                html_tmp += trMtmp;
                if (i == tmpRows.length - 1) {
                    html_tmp += html_foot + AutoPage.footer;
                }
            }
            else {
                html_tmp += html_foot + AutoPage.footer + AutoPage.addPageBreak();
                i--;
                height_tmp = tr0Height;
            }
        }


        $("#" + AutoPage.divID).html(html_tmp);

        var tdpagecount = $("*[name='tdPageCount']");//document.getElementsByName("tdPageCount");
        for (var i = 0; i < tdpagecount.length; i++) {
            tdpagecount[i].innerText = (i + 1) + "/" + page;
        }

    },

    //分页 重新设定HTML内容(双行)
    initPageDouble: function () {

        var tmpRows = $("#" + AutoPage.content)[0].rows; //表格正文
        var height_tmp = 0; //一页总高度
        var html_tmp = "";  //临时存储正文
        var html_header = "<table class='" + AutoPage.tableCss + "'>";
        var html_foot = "</table>";
        var page = 0; //页码

        var tr0Height = tmpRows[0].clientHeight+tmpRows[1].clientHeight; //table标题高度
        var tr0Html = "<tr>" + tmpRows[0].innerHTML + "</tr>" + "<tr>" + tmpRows[1].innerHTML + "</tr>";//table标题内容
        height_tmp = tr0Height;
        for (var i = 1; i < tmpRows.length ; i++) {
            var trHtmp = tmpRows[(i - 1) * 2].clientHeight + tmpRows[(i - 1) * 2+ 1].clientHeight;//第i行高度
            var trMtmp = "<tr>" + tmpRows[(i - 1) * 2].innerHTML + "</tr>" + "<tr>" + tmpRows[(i - 1) * 2 + 1].innerHTML + "</tr>";//第i行内容

            height_tmp += trHtmp;
            if (height_tmp < AutoPage.totalHeight) {
                if (height_tmp == tr0Height + trHtmp) {
                    html_tmp += AutoPage.header + html_header + tr0Html;
                    page++;//页码
                }
                html_tmp += trMtmp;
                if (i == tmpRows.length - 1) {
                    html_tmp += html_foot + AutoPage.footer;
                }
            }
            else {
                html_tmp += html_foot + AutoPage.footer + AutoPage.addPageBreak();
                i--;
                height_tmp = tr0Height;
            }
        }


        $("#" + AutoPage.divID).html(html_tmp);

        var tdpagecount = $("*[name='tdPageCount']");//document.getElementsByName("tdPageCount");
        for (var i = 0; i < tdpagecount.length; i++) {
            tdpagecount[i].innerText = (i + 1) + "/" + page;
        }

    },

    //隐藏原来的数据
    hidenContent: function () {
        $(AutoPage.header).hide();
        $(AutoPage.content).hide();
        $(AutoPage.footer).hide();
    },
    
    添加分页符
    addPageBreak: function () {
        return "<p style='page-break-before:always;'></p>";
    },
    
};




zzh1063
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
打印 手动设置页面打印高度自动分页(需设置纸张高度)
Mzhaocai的博客
09-19 2597
仅做个人项目记录 , 略微混乱 ,仅做参考 (另一种版本 设置页面打印固定条数 参考 https://www.cnblogs.com/tenie/p/4851772.html) 大致原理 ------模板化 -- 头尾中间数据加一起总高度小于A4纸高度, 打印前序列化一次, 获取每个列的高度加一起,数据过多自动换行高度自动变化, 打印分页 使用 &lt...
html表格打印填充分页,window.print()页面打印之表格内容分页填充进行分页打印
weixin_28692153的博客
06-22 2232
windwow.print()用于打印当前窗口的内容，很简便，可当内容特殊并且打印有特殊需求的时候就要绕个圈了。下面是需要打印的表格： 当数据量少的时候像上面的表格一样，中间的内容只有5条数据，打印出来在纸上会有空白，不太好。中间内容是不确定的可能几十条，可能上百条，这样循环在界面上展示是没有问题的，但是当使用火狐打印时会按照表格的大小成倍的缩小，最后打印到一张纸上，字体和表格都会很小，当使用其他...
IE里面打印HTML页面时的分页控制
2401_84150102的博客
04-19 586
就目前的浏览器而言，一种比较有效的补救办法是：当无窗口元素需要覆盖有窗口元素时，运用脚本程序动态地隐藏有窗口元素。下面是一个完整的例子：”>CSS菜单οnmοuseοut=“setDefault(this)” >菜单项目一共四个菜单项目选择列表三个选项页面的!总之，表单元素覆盖样式元素的根源在于HTML元素默认的显示优先级规则。本文介绍的补救办法确实行之有效，不过如果你实在不想用这种办法，那就只好考虑改变页面布局，避免表单元素和样式元素的显示区域重叠。
原生js 实现table 打印
最新发布
weixin_44185995的博客
06-06 277
原生js 实现table打印
table表格打印断页时自动分页的实现方法
SDN233的博客
12-29 3377
利用 css样式和 th 标签占位的方法解决自动分页后每页底部会出现一条横线的问题。先做一个表头、表尾自动分页后，在后一页会自动加到表格头部和尾部的例子。解决的方法是在thead的tr中加入th标签占位和利用css样式解决，直接上代码。有时候table表格打印的时候会遇到 自动分页时每页最底部有一根横线。其实还是利用 thead 标签实现自动分页的效果，直接上代码吧。接下来写一个没有表头和表尾的表格打印，内容自动分页的实现方法。完美解决自动分页后底部出现横线的问题。table表格打印自动分页的实现思路。
html打印表格自动分页,Web分页打印 细线表格+分页打印之终极攻略
weixin_31975689的博客
05-30 542
Web分页打印 细线表格+分页打印之终极攻略发布时间：2009-03-01 23:46:40 作者：佚名 我要评论最近给客户做打印的时候，客户提出打印时不要打印该页面的头，只是打印表格里面的内容，因为头部有背景和打印按钮，而最近给客户做打印的时候，客户提出打印时不要打印该页面的头，只是打印表格里面的内容，因为头部有背景和打印按钮，而且要细线表格的那种，我想细线表格不是很简单吗如果你还不知...
前端实现打印功能，并且数据超出自动分页
qq_59728477的博客
06-14 1507
由于业务需要，想在系统内实现打印功能，并且内容过多要自动分页，如下：要实现这种效果：废话少说，直接上代码：随后在需要使用的页面引入：该方法接收两个参数为标签的内容，可以使用或者来获取。为打印方向，分为和。
jspdf支持分页和清晰度处理DEMO
03-26
当内容超过当前页面的容量时，可以通过检测页面高度并调用`addPage`进行自动分页。同时，jspdf还支持设置页眉和页脚，这在创建多页文档时非常实用，可以使用`setHeader`和`setFooter`方法进行定制。 接下来，我们...
Report machine 2.4
03-16
十、首家支持缩放打印功能，可以根据打印时选择的纸张自动缩放报表。 十一、多种格式转换，可以把做出的报表转换为html,xml,bmp,jpeg等等格式。 十二、自动对超长记录折行，超长的内容也会自动折行。 十三、...
硕正轻量级富Web应用套件–硕正报表主要指标及功能清单.docx
11-13
- 高度符合预览和实际打印效果 - 打印范围控制，支持双面打印 - 彩色/单色打印，分页功能 - 页眉页脚自定义，支持强制分页 - 适应不同打印纸尺寸，支持垂直和水平分页 - 表头和左侧列固定，实现类似冻结的效果...
delphi操作excel模块，图片，表格，读写删除
01-30
设置分页符 XLSReadWriteII完全支持Unicode 所有的字符型都是宽字符型。你完全不必担心非英语字符。 控件 你可以插入控件以及定义他们的源和目的单元 绘图 插入所有种类的绘图，从简单的线条到AutoShapes ...
HTML 打印table分页
Yxh_255的博客
03-13 1007
html打印table分页
页面打印table表格分页问题
qq_37777316的博客
04-11 358
打印table表格时，表格出现割裂等问题
前端如何让网页打印时每一页都有固定的头部，且在达到固定高度时自动分页...
weixin_34087307的博客
02-26 5658
页面效果： 第一页 第N页 业务需求： 1.网页点击打印时，打印渲染的页面每一页的头部都要有公司logo；2.而且分页时不能让某一行的表格断开（必须在达到固定高度时让页面自动分页）； 为了实现上述需求，过程可谓心塞 我首先尝试着让每一页的头部都能打印出相同的东西， 本来想偷个懒，借助浏览器自带的打印设置功能，却发现行不通行不通 谷歌虽...
window.print（） 表格打印 完美实现分页
qq_38935512的博客
03-05 6819
问题描述： 采用js打印页面，表格过长 会出现分页，表格就会被裁减（那种每行固定就一行展示的简单，每个分页给他多少条数据就完事了），这里的问题是数据从后台获取，而且每一列都可能出现换行，多的可能达到10几20行的。 需要的效果 思路： 分页采用 <div style="page-break-after:always"></div> 一、整理思路 1.不同的分页中都要有...
table打印分页问题解决
qq_39037897的博客
06-23 2440
1.table设置border: none； 2.tr设置page-break-inside:avoid;// 防止table数据太多，tr分页错乱 3.td设置border: 1px solid #000;// 防止部分分页的tr边框线没有 .checkprint-table { margin-top:10px; display: table; width: 960px; font-family: 仿宋 !important; font-size: 22px; text-align: left; bord
浏览器打印长table时按页拆分
shuxiaoxii的博客
04-24 1098
js解决 长table 打印 拆分问题.
el-table 分页固定table高度
06-09
你可以通过设置 `max-height` 属性来固定 `el-table` 的高度，然后在设置分页时，将每页显示的行数设置为固定值，从而实现分页固定表格高度的效果。 具体实现步骤如下： 1. 在 `el-table` 上设置 `max-height` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值