js表格打印自动分页demo

最新推荐文章于 2024-06-06 11:23:53 发布
最新推荐文章于 2024-06-06 11:23:53 发布
阅读量1.1k 收藏
点赞数
文章标签： javascript java ViewUI
原文链接：https://segmentfault.com/a/1190000017831841
版权

两个必须要有一个。

每页都需要表头就将内容放在这个中：
<thead style="display: table-header-group; font-weight: bold"></thead>

每页都需要表尾:
<tfoot style="display: table-footer-group; font-weight: bold"></tfoot>

代码如下:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        @media print {
            INPUT {
                display: none;
            }
        }
    </style>
</head>

<body>
<table border="1" style="font-size: 9pt;" width="300px" align="center">
    <thead style="display: table-header-group; font-weight: bold">　　
    <tr>
        <td align="center" style="font-weight: bold; border: 3px double red">表头</td>
        <td align="center" style="font-weight: bold; border: 3px double red">表头2</td>
    </tr>
    </thead>
    <tbody style="text-align: center">
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容1</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容2</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容3</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容3</td>
        <td>表`请输入代码`格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容</td>
        <td>表格内容</td>
    </tr>
    <tr>
        <td>表格内容3</td>
        <td>表格内容</td>
    </tr>
    </tbody>
    <tfoot style="display: table-footer-group; font-weight: bold">
    <tr>
        <td colspan="2" align="center" style="font-weight: bold; border: 3px double blue">每页都有的表尾</td>
    </tr>
    </tfoot>
</table>
<input type="button" value=" 打 印 " onclick="javascript: window.print();">
</body>
</html>
weixin_33738578
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html表格自动跨页,利用js制作html table分页示例(js实现分页)
weixin_39638526的博客
05-30 856
有时候table的列数太长，不利于使用者查询，所以利用JS做了一个table的分页，以下为相关代码一、JS代码var pageSize = 15; //每页显示的记录条数var curPage=0; //当前页var lastPage; //最后页var direct=0; //方向var len; //总行数var page;...
VUE打印demo，自动分页
10-10
总结来说，这个“VUE打印demo，自动分页”项目涵盖了Vue.js组件化开发、Vue插件集成、CSS打印样式和自动分页逻辑等多个知识点。通过这个项目，开发者可以学习到如何在Vue环境中优雅地实现打印功能，提高用户体验。
JavaScript 页面打印，预览，设置，分页
weixin_44240581的博客
03-17 400
在HTML页中加载打印对象 <object id="WebBrowser" width="0" height="0" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></object> 实现打印、预览、设置功能 <input type="button" value="打印" onclick="document.all.WebBrowser.ExecWB(6,1)" /> <input type="butt
js javascript js控制分页打印,打印分页
z_p35716464的专栏
05-15 614
%@ page language="java" contentType="text/html; charset=UTF-8"       pageEncoding="UTF-8"%>   >   HTML>   HEAD>   TITLE>javascript打印-打印页面设置-打印预览代码TITLE>    META http-equiv=Content-Type content="
【打印功能】js简单实现表格样式的数据打印，按样式打印出来
最新发布
seeeeeeeeeee的博客
06-06 377
1，html部分：写一个表格，然后数据填进去。2，css部分：把表格样式搞一搞。3，js部分：这样复制过去就行了。4，点击打印按钮，搞定。
页面打印表格换页问题
ravenYoung的博客
06-16 1964
在打印一个html页面时，会出现table数据过长，需要分多个页面打印，这时候会出现一行切成两行，导致表格行错乱。
bootstrap-table 分页Demo
03-03
bootstrap-table后端分页的参数设置Demo。 bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、...
layui表格 可搜索过滤 可分页
03-25
layui表格是一款基于layui框架的前端组件，用于展示数据并提供搜索、过滤和分页功能。layui是中国流行的前端UI框架，以其简洁、优雅的代码风格和强大的功能受到开发者的喜爱。在“layui表格 可搜索过滤 可分页”这个...
layui+nicePage.js实现JSON自动表格分页代码.zip
09-26
在本项目中，我们主要关注的是使用layui和nicePage.js实现JSON数据的自动表格分页。layui是一款轻量级的前端UI框架，提供了一系列丰富的组件，包括表格、按钮、表单等，适用于快速构建简洁、直观、强大的网页界面。...
bootstrap和jQuery做带分页跳转的表格实例
03-31
本实例主要展示了如何使用 Bootstrap 和 jQuery 创建一个带有分页跳转功能的表格，这在数据展示和管理中非常常见。我们将讨论以下几个关键知识点： 1. **Bootstrap**：Bootstrap 是一个流行的开源 CSS 框架，它提供...
JS 实现分页打印功能
01-19
在调用window.print()时，可以实现打印效果，但内容太多时要进行分页打印。 在样式中有规定几个打印的样式 page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。 每个打印属性都可以设定4种设定值：auto、always、left和right。其中Auto是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。 page-break-before若设定成always，则是在遇到特定的组件时，打印机会重新开始一个新的打印页。 page-break-before若设定成left，则会
js分页批量打印例子并去掉页码和下面的地址
04-15
js分页批量打印例子并去掉页码和下面的地址
基于jquery.print.js插件的js打印demo
04-21
基于jquery.print.js插件的js打印demo，简单易用，使用详细教程请查看我的个人主页的博客《一款很好用的Jquery 打印插件——jQuery.print.js》
js局部打印demo
08-17
jquery实现局部打印的效果中文不乱码
jqprint可分页打印页面内容
12-09
利用jquery插件jqprint打印当前页面的标签内容，自动换页，包含jar包，js，java代码。
js解决表格再打印时，分页的时候，边框线丢失的问题
JulyNight的博客
06-22 2013
js解决表格再打印时，分页的时候，边框线丢失的问题
js分页打印
Hi, Sun
11-15 94
http://brzore.iteye.com/blog/1555720
JS 实现分页打印
weixin_30596735的博客
05-25 616
在调用window.print()时，可以实现打印效果，但内容太多时要进行分页打印。 在样式中有规定几个打印的样式 page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。 每个打印属性都可以设定4种设定值：auto、always、left和right。其中Auto是默认值，只有在有需要时，才需设定分页...
bootstrap table 分页 demo
10-18
Bootstrap Table是一个基于Bootstrap的表格插件，它提供了一套简单易用的表格展示和...通过以上步骤，就可以实现一个简单的Bootstrap Table分页的demo。可以根据实际需求修改和扩展代码，实现更多的功能和样式定制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值