严格分页打印html页面

最新推荐文章于 2023-12-25 11:52:20 发布
最新推荐文章于 2023-12-25 11:52:20 发布
阅读量404 收藏
点赞数
文章标签： python xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/new_jeffer/article/details/84619885
版权

将html页面打印，打印出来的页面分隔难以控制，通过以下方法可以做到页面严格按预想的打印。

1、严格控制div的高度，将body、div的纵向padding、margin都设为0，border也设为0

2、打印时选无边距打印

<!DOCTYPE html PUBaC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>
            
    </title>
    <style>
    		body {
    			padding:0px;
    			margin:0px;    			
    		}
    		div {
    			padding:0px;    			
    			margin:0px;
    		}
    		
    		.warpper {
    			height:370px;
    			padding:0px 20px; 
    			border:0px;  		    			
    		}
    		.content {
    			height:320px;    			
    		}
    		.blank {
    			height:30px;    			
    		}    		
    		
    </style>
</head>
<body>		
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">1</div><div class="">bottom</div></div>
	<div class="warpper"> <div class="blank">top</div><div class="content">2</div><div class="">bottom</div></div>	
	
</body>
</html>

 

 

new_jeffer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web Html 分页、表格跨页断裂处理、自定义页眉页脚页码打印控件
10-11
Web打印控件，完美解决以下HTML打印难题 1.Web Html 分页打印 2.内容、图片、表格跨页断裂，封边 3.table并行、并列双边、重边 4.自动计算页码（总数及每一页），样式、位置、形式完全个性化 5.页眉页脚，去除浏览默认，自定义内容、样式、位置 6.保持页脚在页面底部，而非紧接正文内容 7.保持原文CSS样式 8.便捷自定义设置工具条 9.调用、语法简单，便捷 更过详细技术难点、解决思路、实现过程讲解，及细致的代码注释，本人博文有详细介绍 https://blog.csdn.net/chao141yang/article/details/108991252 欢迎查阅或交流！
HTML分页打印。Web打印控件，完美解决页面排版、结构复杂，内容、图片、表格跨页断裂，自定义页面设置、页眉、页脚、页码，保持原文CSS等难题
怡图+ 博客
10-10 6468
1.Web html 分页打印； 2.内容、图片、表格跨页断裂，封边； 3.table并行、并列双边、重边； 4.自动计算页码（总数及每一页），样式、位置、形式完全个性化； 5.页眉页脚，去除浏览默认，自定义内容、样式、位置； 6.保持页脚在页面底部，而非紧接正文内容； 7.保持原文CSS样式； 8.便捷自定义设置工具条； 9.调用、语法简单，便捷。
html - table分页断行,关于window.print网页分页换页table不断行的处理
weixin_32791013的博客
06-29 2019
在打印的时候，如果数据多，div又是一整个，table过长，就会导致断行出现，这个要怎么改呢。.avoidBreak {border: 2px solid;page-break-inside:avoid;}JS:function Print(){$(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width",...
打印HTML页面，表格元素被截断的解决方案
dongnihao的博客
12-06 1697
你的答案是正确的，我现在有一个附加的需求，让所有的表格都自适应宽度。我的要求是，对于所有的table元素，我希望宽度自适应，并且里面的每个单元格都是平均分配宽度的。我的问题是：我要做一个打印HTML页面功能，这个页面的表格是动态生成的，具有多个表格，现在面临的问题是，在第一页末尾无法放下这一整个表格，如何做到将这个表格分。现在，代码会将表格之前其他 DOM 元素的高度累加，并与表格高度一起比较来决定是否需要对表格进行分割。你是希望计算表格之前其他 DOM 元素的高度，而不仅仅是表格上半部分的高度。
jQuery打印指定区域Html页面并自动分页
10-25
在网页开发中，有时我们需要对特定的HTML区域进行打印，而不是整个页面。在这种情况下，`jQuery.PrintArea.js`插件提供了一个解决方案，它允许我们指定要打印的区域，并且能够自动进行分页。这个插件特别适用于那些...
html打印分页自带表头表尾
01-15
需要自己写打印程序时，会遇到打印分页都需有表头表尾的问题，html打印分页自带表头表尾，可以参考学习下
C# 分页打印（报表打印）
05-14
在C#编程中，分页打印和报表打印是常见的任务，尤其在开发企业级应用程序时。这涉及到将数据从数据库或其他数据源呈现到纸张上，通常以表格或图表的形式。下面将详细介绍C#中实现分页打印和报表打印的关键知识点。 ...
web 页面分页打印的实现
09-06
Web 页面分页打印是指在网页中实现分页打印的功能，使得用户可以根据需要选择性打印网页的特定部分。下面是实现 Web 页面分页打印的详细知识点： 一、引入 WebBrowser 控件 要实现 Web 页面分页打印，首先需要引入...
jqprint可分页打印页面内容
12-09
jqPrint的核心功能就是能够将HTML元素，如一个`<div>`或`<table>`，甚至是整个页面的内容，按照打印机的页面设置进行分页打印。它能够自动处理页面断点，确保内容不会因为超出一页而被截断。这对于展示大量数据或者...
HTML print打印(分页,统计,排版)
11-21
方案一(适用于动态页面)分层结构 方案二(适用于静态页面)独立结构 /** * 基于jquery的打印分页插件 * 方法API: * loadDate data,model,shownum(数据源[数组],模板页面,每页显示数) data 建议最大数据量不要超过500 * loadTABLE 利用模版创建TABLE代码 * insertTABLE 插入数据 * formwork 创建分页框架 * setAlign 设置排版样式 右对齐 - 居中 * setWidth 设置宽度 * setLineHide 影藏一列数据 * rowspans 合并多列字段 用,隔开 注意:最好查询时使用排序后合并 * rowspan 合并一列字段 注意:最好查询时使用排序后合并 * StringtoJSON 将JSON的String字符,转换成JS对象数据 * getalign 字符切换 对应setAlign 方法 * SumTable 计算表的列("2,3,4") 对应层级TABLE **/
html页面打印行隔断,html2canvas转pdf分页隔断问题处理
weixin_39580564的博客
06-04 670
//html代码...//下载前处理的函数renderOverpageClum () {let demoHeight = $('#demo').height()let pageWidth = $('#demo').width()let pageHeight = pageWidth / 595.28 * 841.89 // 计算每页的高度let pageNum = Math.ceil((demo...
html打印时显示不全,打印表格时内容显示不完整怎么办？四种方法解决WPS不完整问题...
weixin_39769187的博客
06-11 4431
在打印表格时，偶尔出现表格内容显示不完整的状况，这是什么原因导致的呢？出现这样的情况应该如何处理？接下来为大家介绍几种处理方法，可以对应情况来解决。一、取消打印区域打印表格显示不完整，有可能是因为设置了固定的打印区域，导致打印表格时，只打印所选则的区域。遇到这样的情况，点击上方菜单栏-页面布局-打印区域-取消打印区域，即可全部显示出内容。二、更改分页设置可以点击上方菜单栏-页面布局-分页预览，点击...
页面分页打印不完整的解决方法
qq_23392319的博客
12-07 624
1.问题 2.解决 使用 thead、tbody两个标签解决，使用thead标签包裹表头，使用tbody标签包裹表体，例如下图
excel打印预览在哪里_表格打印不全怎么办？这招超简单！
weixin_39661345的博客
11-18 497
私信回复关键词【福利】~获取丰富办公资源，助你高效办公早下班！大家好，我是小E~最近，秋叶 Excel 学习班@花生 同学，从同事那里收到了一份开会要用的表格，需要马上就要打印出来。会议主题是，从五个学员中选出一位最优学员。表格中含有五位学员的信息：五名学员的信息按照下面表格进行整理，一共有五张表格(表格在同一工作表中，首尾相连)。然而，花生同学点击打印预览时，发现只有学渣学员一个人的信息，而且信...
通过html和css实现打印分页控制
最新发布
crazyXB的博客
12-25 2237
通过html和css实现打印分页控制，用到的属性为page-break-before和page-break-after
HTML生成PDF、web打印动态分页、预览。内容满了，自动换页、移动端兼容 bookjs-eazy
NOP
01-19 6257
web打印自动分页，生成PDF。内容满了，自动换页。bookjs-eazy 转自：https://www.zhouwuxue.com 预览案例 eazy-2.html 另一个小说案例 除了自动分页，打印页码。还可以生成目录 使用方式： 配置页面参数： 在全局定义一个bookConfig <script> bookConfig = { pageSize : 'A4', // 定义纸张大小 // orientation : 'portrait',// lands
HTML 打印table分页
Yxh_255的博客
03-13 1007
html打印table分页
html分页打印插件的使用
08-09
HTML分页打印插件可以帮助我们在打印HTML时进行分页控制，以确保打印结果与屏幕上的显示一致。下面是HTML分页打印插件的使用方法。 首先，我们需要引入HTML分页打印插件的脚本文件。可以从插件的官方网站下载相应的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值