html表格打印填充分页,window.print()页面打印之表格内容分页填充进行分页打印

article/2025/9/22 18:03:30

windwow.print()用于打印当前窗口的内容,很简便,可当内容特殊并且打印有特殊需求的时候就要绕个圈了。下面是需要打印的表格:

fce5df37e8e5ad3d743e44840f7e0e20.png

当数据量少的时候像上面的表格一样,中间的内容只有5条数据,打印出来在纸上会有空白,不太好。中间内容是不确定的可能几十条,可能上百条,这样循环在界面上展示是没有问题的,但是当使用火狐打印时会按照表格的大小成倍的缩小,最后打印到一张纸上,字体和表格都会很小,当使用其他浏览器时它会自动将内容打印到下一张纸上,因为打印到纸上不可能没有边距,所以在纸与纸衔接的时候会存在数据丢失打印不出来的情况。

经过测试,当每页17条数据的时候打印出来可以满页填充,既不会所以为了使打印出来的表格更靠谱,更为用户着想一些,在界面显示的时候显示的条目为实际的条目,打印时如果数据量少就进行自动空白填充,如果数据量大在保留标题、表格上半部分和下半部分的同时进行分页填充打印,打印完成后再恢复原来的页面。

实现思路:

1.使用打印分页css,相当于分页符,总是在此div后分页

ps:关于page-break-after的使用:http://www.w3school.com.cn/cssref/pr_print_page-break-after.asp   需要特别注意的是它应用于:position 值为 relative 或 static 的非浮动块级元素。当时absolute的时候是不起作用的。

2.将界面分为两个div,一个div中用于进行界面展示,另一个div进行打印填充,两个div

一个为界面展示时的样式,另一个为打印时的样式,单击打印时页面div隐藏,对另外一个div进行填充,打印方法执行完成后,页面div显示,另一个div隐藏。

3.将页面div分为几部分:

第一部分为标题内容部分,第二部分为表格上半部分是固定的,第三部分为数据部分,每页的内容是不同的, 第四部分为表格下半部分,最后为表格下面的内容部分是固定的。

页面展示div代码展示:

********资料凭单

${currentDate}NO:

姓    名

电    话

单    位

类    别

社内 军内 地方

内    容

用    途

类    别

新闻 宣传 商业

序    号

底片号/画报号

年    代

尺    寸

价    格

${varStatus.index+1}

"/>

${item.pictureInfo.width}*${item.pictureInfo.height}

${varStatus.index+1}


http://chatgpt.dhexx.cn/article/bRkjE4ht.shtml

相关文章

在线表格

在线表格案例 模仿的是腾讯文档 首先观察腾讯文档的表格效果&#xff0c;然后在构建出思路&#xff0c;开始编写代码 效果图&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title>在线表格<…

Java获取word表格中的数据

前言: 有时系统中需要提取各种文件中的数据&#xff0c;比如做报表的系统中就常常与Excel表格数据做交互。做Excel报表数据时有选择POI实现的&#xff0c;但是POI功能也很单一&#xff0c;对于文档格式维护性差&#xff0c;最重要的是POI在操作word数据时显得力不从心&#xf…

HTML 表格元素

表格元素 在日常生活中&#xff0c;我们对表格已经非常熟悉了&#xff0c;表格的基本作用是用来存放数据&#xff0c;它是数据的二维容器&#xff0c;人们常常用它来记录财务数据、列车时刻表、电视节目单等。 大多数情况下&#xff0c;表格都是由列标题或行标题&#xff0c;…

Bootstrap3 表格样式

表格 HTML表格是数据的二维容器&#xff0c;它的基本作用是用来存放数据。表格能够清晰、直观地描述数据间的逻辑关系&#xff0c;如果借助CSS设计表格的样式&#xff0c;阅读数据将会变得更轻松。 表格结构包括众多标签&#xff0c;这些标签各司其职&#xff0c;共同完成二维…

数据库表格查询

1、数据库表示存储数据中所有数据的对象&#xff0c;在表中&#xff0c;数据按行和烈格式逻辑组织&#xff0c;类似于电子表格&#xff0c;数据库是SchoolMangeSystem&#xff0c;使用数据库表是SYS_Student&#xff0c;如下图&#xff1a; select字段列表&#xff0c;字段别名…

html中标题距离顶部距离,版式设计中标题间距的使用法则

主标题与副标题定义 主标题是文案的核心主旨&#xff0c;可以直接表达&#xff0c;也可以含蓄表达&#xff0c; 副标题是对对主标题意思的具体阐释&#xff0c;或者主标题意思的进一步延伸。 字距与行距 横向的字间距与纵向的行间距的关系&#xff1a; 请保持行间距的高度&…

表格解析 概览

表格解析发展至今&#xff0c;仍然是一项很年轻的研究领域&#xff0c;出现了大量解决方案&#xff0c;常用的技术包括&#xff1a;线检测、box检测、分割、多模态融合、GCN、img2seq。以下按我的理解梳理一下表格解析各个流派&#xff0c;从中了解这项任务背后所采用的技术。在…

5.让表格的标题在滚动表格时一动不动

一、冻结首行首列 处理数据量较大的表格时&#xff0c;向下拖动滚动条&#xff0c;表格的标题栏就不见了&#xff0c;用户在查看数据时&#xff0c;需要来回拖动滚动条才能看到标题&#xff0c;那么是否可以将表格设置成无论怎样滚动表格&#xff0c;标题都始终显示呢&#xf…

python表格控件_python表格控件

广告关闭 腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! pyqt5表格控件qtableview简介在通常情况下,一个应用需要和一批数据进行交互,然后以表格的形式输出这些信息,这时就需要用到qtableview类了,在qtableview中可…

element-ui(vue)表格的自定义标题,逻辑判断

<el-table :data"tableData" style"width: 100%" border><el-table-column width"180"><!-- 自定义标题--><template slot"header"><i class"el-icon-time"></i><span>自定义标题…

tomcat-命令窗口乱码

问题描述&#xff1a;刚下载的tomgcat不添加任何项目直接运行时&#xff0c;tomcat的命令窗口出现中文乱码 解决方法&#xff1a; 1、找到${CATALINA_HOME}/conf/logging.properties 2、添加语句&#xff1a;java.util.logging.ConsoleHandler.encoding GBK 3、重启tomcat&…

在此处打开命令窗口 (Open command window here)

在此处打开命令窗口 (Open command window here) 1. 在此处打开命令窗口 (Open command window here) Shift 鼠标右键 2. .exe 执行 在 .exe 文件所在的文件夹打开命令提示符窗口。如果使用的是 Windows Vista 或 Windows 7 系统&#xff0c;则需要在 Windows Explorer 中右…

mysql自动弹出命令窗口 解决

为什么mysql会自动弹出来命令窗口 关键词&#xff1a; Unable to connect to remote host. Catalog download has failed. 解决办法&#xff1a; 控制面板&#xff08;小图标&#xff09;->管理工具->任务计划程序->mysql->installer 右键禁用即可

win10系统中如何显示在此处打开命令窗口

1、首先按住windowsr键&#xff0c;在弹出的窗口中输入regedit&#xff0c;点击回车 2、找到 计算机\HKEY_CLASSES_ROOT\Directory\Background\shell\cmd&#xff0c;在右侧的框中&#xff0c;鼠标选择“默认”项&#xff0c;右键点击“修改”&#xff0c;在弹出的窗口中输入“…

Windows10如何在文件夹打开DOS命令窗口

在安装RabbitMQ的时候&#xff0c;总结了一下在当前文件夹打开DOS窗口的方式&#xff0c;大概有三种方式&#xff0c;推荐使用第三种。 &#xff08;这里D:\Tools\RabbitMQ\RabbitMQServer\rabbitmq_server-3.9.8\sbin作为目标文件夹&#xff09; 第一种方式 1、winr&#xf…

记录下使用plsql命令窗口执行sql脚本的写法

如果把sql脚本放在sql窗口中执行&#xff0c;速度比较慢&#xff0c;所以可以在命令窗口中输入sql脚本的位置来执行 SQL> C:\Users\Administrator\Desktop\脚本.txt 注意&#xff0c;路径前要加上&#xff0c;否则不会执行。

linux基础-- 桌面系统如何切换命令窗口

简单说一下linux 的一些基本命令&#xff0c;对linux的命令进行一个简单的了解。&#xff08;操作系统为centos7&#xff09; 一般我们个人安装的centos的时候会安装一个桌面系统. window是带有桌面&#xff0c;linux不同的版本也会带有自己的桌面系统的。而centos有两种常见…

matlab运行.m文件的命令,怎样在matlab的命令窗口运行.m文件

www.mh456.com防采集。 有两种方法&#xff1a;1、选中m文件&#xff0c;鼠标右键run&#xff0c;即可。2、在命令窗口输入m文件的名字&#xff0c;即可。觉得有帮助就采纳吧。 这要看你的M文件是函数文件还是脚本&#xff1a;如果是函数function开头&#xff0c;比如function …

1. Win 10 :在此处打开命令窗口

1.在此处打开CMD命令行窗口 在当前目录下打开命令窗口 步骤&#xff1a; - altd定位到资源管理器地址栏。 - 输入cmd后回车截图讲解 ①&#xff1a; ②&#xff1a; ③&#xff1a; 2.在此处打开Windows Powershell 在需要操作的文件夹下按住Shift鼠标右键&#x…

win11添加右键在此处打开命令窗口

win11添加右键在此处打开命令窗口 今天升级win11之后发现右键菜单变了&#xff0c;使用起来很不适应&#xff0c;而且按住 Shift 鼠标右键 也没有了“在此处打开命令窗口”的菜单。 一通百度折腾之后终于改了回来&#xff0c;详细步骤如下&#xff1a; 一、改回win10右键菜单…