页面打印时强行分页的处理table换行处理

最新推荐文章于 2023-08-22 17:07:35 发布
转载 最新推荐文章于 2023-08-22 17:07:35 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/qihaiyan1989/archive/2010/08/05/1792863.html
文章标签：

#javascript #前端 #ViewUI

本文介绍了如何使用CSS属性page-break-before实现网页内容的强制分页，并提供了导出、打印等操作的具体实现代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在要打印强行分页的地方加上:

<P class=normal style="PAGE-BREAK-BEFORE: always">&nbsp;</P>

即可. 解释如下:

page-break-before版本：CSS2　 兼容性：IE4+　继承性：无
语法：
page-break-before : auto | always | avoid | left | right | null
取值：

auto :　假如需要在对象之前插入页分割符
always :　始终在对象之前插入页分割符
avoid :　未支持。避免在对象之前插入页分割符
left :　未支持。在对象之前插入页分割符直到它到达一个空白的左页边
right :　未支持。在对象之前插入页分割符直到它到达一个空白的右页边
null :　空白字符串。取消页分割符设置

 

 

二 是实现导出，打印，页面设置，打印预览的功能

<object id="WebBrowser" style="z-index: 104; left: 624px; width: 0px; position: absolute;
            top: 160px; height: 0px" height="112" width="77" classid="clsid:8856F961-340A-11D0-A96B-00C04FD705A2"
            viewastext>
        </object>
          <div id="btn" style="text-align: center; width: 90%; margin-bottom: 5px">
          <button class="input-button" onclick="document.execCommand('saveas','','巡检单.html');"
                style="width: 80px; height: 20px" type="button">导出</button>
              &nbsp;<input class="input-button" onclick="btn.style.display='none';document.all.WebBrowser.ExecWB(6,6);btn.style.display='block';"
                    type="button" value="打 印" style="width: 80px; height: 20px" id="Button1">
                <input class="input-button" onclick="btn.style.display='none';document.all.WebBrowser.ExecWB(8,1);btn.style.display='block';"
                    type="button" value="页面设置" style="width: 80px; height: 20px">
                <input class="input-button" onclick="btn.style.display='none';document.all.WebBrowser.ExecWB(7,1);btn.style.display='block';"
                    type="button" value="打印预览" style="width: 80px; height: 20px">
            </div>

转载于:https://www.cnblogs.com/qihaiyan1989/archive/2010/08/05/1792863.html

html表格打印自动换行,html 表格自动换行问题
weixin_30759991的博客
05-31 1233
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义css#wrap{white-...
VB速查大全(数据库、表格及报表编程) ★ VB错误处理，ado常见错误，VB数据类型等，网上有很多教程是错的，强烈建议看此文
ecz00的专栏
05-19 8726
VB异常处理 (很重要) ado常见错误 ado游标及锁定介绍 免费报表控件 免费表格控件 vb数据类型(很多程序出问题出在这个，一定要看，VB msdn说的不太对) VB可用的AES加密sqlite_odbc 及 cairo_sqlite (VBRichClient自带的非odbc连接) 有vbRichClient代替winsock、实现vb多线程及远程调用activeX等
打印分页，html强制分页
09-25
打印分页，html强制分页，一个表格一页，可以查看打印预览
html table 自动 换页,jQuery自动分页打印表格(HTMLtable)，可以强制换页
weixin_36432451的博客
05-31 999
1 2 3 4 5 6 (function() {7 window.print();8 })();9 10 11 *12 {13 margin:0;14 padding:0;15 }16 body17 {18 font-family:Verdana, Geneva, sans-serif;19 font-size:12...
同一个table下的tr进行分页打印
lijj_html5的博客
04-20 7312
开始尝试用css的page-break-after 属性 实现对tr  的分页 打印效果，结果发现 该属性对 table 不起作用，  然后换了一种方法，方法的思路大概描述下           1 、 先找到 要进行打印的tbody 然后 利用tbody 得到在其内的 tr数组。            2 、利用循环， 每打印一页 ，就 删除打印过的tr (我这里是每6个tr是一页，所以每
前端打印表格的换行处理
weixin_41897680的博客
05-20 989
前端打印表格的换行处理
public static void exportToWord(List<EntityItem> records, String outputPath) throws Exception { try (XWPFDocument doc = new XWPFDocument()) { // ========== 1. 页面设置（紧凑页边距） ========== CTSectPr sectPr = doc.getDocument().getBody().addNewSectPr(); CTPageSz pageSize = sectPr.addNewPgSz(); pageSize.setOrient(STPageOrientation.LANDSCAPE); pageSize.setW(BigInteger.valueOf(16840)); // A4横向宽度 pageSize.setH(BigInteger.valueOf(11900)); // A4横向高度 // 紧凑页边距（单位：twips，1cm≈567twips） CTPageMar pageMar = sectPr.addNewPgMar(); pageMar.setLeft(BigInteger.valueOf(390)); // 1.5cm (原1440=2.54cm) pageMar.setRight(BigInteger.valueOf(390)); // 1.5cm pageMar.setTop(BigInteger.valueOf(900)); // 2cm (原1800=3.17cm) pageMar.setBottom(BigInteger.valueOf(900));// 2cm pageMar.setFooter(BigInteger.valueOf(900)); // 页脚1.59cm // ========== 2. 创建表格 ========== XWPFTable table = doc.createTable(); table.setWidth("100%"); // 列宽设置（单位：twips） int[] columnWidths = {500, 800, 1200, 5000, 5000}; CTTbl cttbl = table.getCTTbl(); CTTblGrid tblGrid = cttbl.addNewTblGrid(); for (int width : columnWidths) { tblGrid.addNewGridCol().setW(BigInteger.valueOf(width)); } // ========== 3. 表头样式（水平居中+加粗大字） ========== XWPFTableRow headerRow = table.getRow(0); for (int i = 0; i < columnWidths.length; i++) { XWPFTableCell cell = headerRow.getCell(i); if (cell == null) cell = headerRow.createCell(); // 设置列宽 cell.getCTTc().addNewTcPr().addNewTcW().setW(BigInteger.valueOf(columnWidths[i])); // 创建水平居中段落 cell.removeParagraph(0); XWPFParagraph para = cell.addParagraph(); para.setAlignment(ParagraphAlignment.CENTER); // 水平居中 // 设置标题样式 XWPFRun run = para.createRun(); run.setBold(true); run.setFontSize(12); // 标题行字体放大 run.setText(getHeaderText(i)); run.setColor("000000"); } // ========== 4. 数据行样式（水平居中） ========== int num = 0; for (EntityItem record : records) { XWPFTableRow row = table.createRow(); row.setCantSplitRow(true); // 序号列（水平居中） createCenteredCell(row, 0, String.valueOf(++num)); // 工装编号列（水平居中） createCenteredCell(row, 1, record.getToolNumber()); // 资产名称列（水平居中） createCenteredCell(row, 2, record.getToolName()); // 图片列1（左对齐） XWPFTableCell imageCell = row.getCell(3); imageCell.getCTTc().addNewTcPr().addNewTcW().setW(BigInteger.valueOf(columnWidths[3])); addImagesToCell(imageCell, record.getPropertyUri(), "D:\\imageFile\\"); // 图片列2（左对齐） XWPFTableCell nameplateCell = row.getCell(4); nameplateCell.getCTTc().addNewTcPr().addNewTcW().setW(BigInteger.valueOf(columnWidths[4])); addImagesToCell(nameplateCell, record.getNameplateUri(), "D:\\imageFile\\"); } // ========== 5. 添加页码 ========== addPageNumbers(doc); // ========== 6. 保存文档 ========== try (FileOutputStream out = new FileOutputStream(outputPath)) { doc.write(out); } } } // 辅助方法：创建水平居中单元格 private static void createCenteredCell(XWPFTableRow row, int pos, String text) { XWPFTableCell cell = row.getCell(pos); if (cell == null) cell = row.createCell(); cell.removeParagraph(0); XWPFParagraph para = cell.addParagraph(); para.setAlignment(ParagraphAlignment.CENTER); // 水平居中 XWPFRun run = para.createRun(); run.setText(text); } // 辅助方法：添加图片到单元格（左对齐） private static void addImagesToCell(XWPFTableCell cell, List<String> imagePaths, String basePath) throws Exception { XWPFParagraph para = cell.addParagraph(); para.setAlignment(ParagraphAlignment.LEFT); // 图片左对齐 XWPFRun run = para.createRun(); for (int i = 0; i < imagePaths.size(); i++) { try (java.io.InputStream is = new java.io.FileInputStream(basePath + imagePaths.get(i))) { run.addPicture(is, XWPFDocument.PICTURE_TYPE_PNG, imagePaths.get(i), Units.toEMU(100), Units.toEMU(100)); // 每3张图片换行 if ((i + 1) % 3 == 0 && i != imagePaths.size() - 1) { run.addBreak(); } } } } // 表头文本 private static String getHeaderText(int colIndex) { String[] headers = {"序号", "工装编号", "资产名称", "关联图片", "铭牌"}; return headers[colIndex]; } // 页码添加 private static void addPageNumbers(XWPFDocument doc) { XWPFFooter footer = doc.createFooter(HeaderFooterType.DEFAULT); XWPFParagraph para = footer.createParagraph(); para.setAlignment(ParagraphAlignment.CENTER); XWPFRun run = para.createRun(); run.getCTR().addNewFldChar().setFldCharType(STFldCharType.BEGIN); run.getCTR().addNewInstrText().setStringValue("PAGE"); run.getCTR().addNewFldChar().setFldCharType(STFldCharType.END); run.setText(" / "); run.getCTR().addNewFldChar().setFldCharType(STFldCharType.BEGIN); run.getCTR().addNewInstrText().setStringValue("NUMPAGES"); run.getCTR().addNewFldChar().setFldCharType(STFldCharType.END); }根据代码修改为每页5行数据包含表头，一个图片单元格横向最多放3张图片多了之后换行，如果图片换行也占用一行总行数，如果图片换行后不在当前页整条数据都移动至下一页
最新发布
07-05
但是，这样强行分页可能导致最后一条记录被分割（如果该记录的高度超过当前页剩余空间）。为了避免分割记录，我们在插入分页符之前，需要确保当前页能够容纳5行（表格行）的高度。然而，我们无法得知当前页的剩余...
SSRS 指定数据行数进行换页
代码生活
06-17 3322
SSRS生成IE页面和PDF页面时，可以指定每页生成的数据行数。解决ie页面和pdf显示数据行数不一致问题，以及数据在不恰当的地方换页的问题。 主要是利用RowNumber函数对数据行数分组来实现的。 具体方法如下 1. Tablix に行グループを追加 ※「詳細」にあたるグループの上位グループとして作成します。（名前：Group1 とします。） 2. グループ"Group1"にグル
itext pdf相关，writeSelectedRows
yangdonghhm的专栏
06-25 3034
StreamWriter pPDF=new StreamWriter(filePath); ArrayList xRefs=new ArrayList(); float yPos =0f; long streamStart=0; long streamEnd=0; long streamLen =0; string strPDFMessage=null; //PDF文档头信息 strPDFMess...
Java Web从入门到实战
m0_67393342的博客
07-30 2774
操作系统：管理计算机硬件与软件资源的计算机程序，同时也是计算机系统的内核与基石。主流操作系统Linux发展历程Linux特点Linux与其它操作系统的区别Linux发行商和常见发行版先安装虚拟机，再安装CentosVmware简介Vmware下载：https://www.vmware.com/cn.htmlCentOS镜像下载：https://www.centos.org/download/ 高速下载地址简介：SecureCRT是一款支持SSH（SSH1和SSH2）的终端仿真程序，简单地说是Windows下
html table 分页
09-21
html table page
网页打印，强制分页并为每一页添加标题，为每一页添加表头
qq_45380371的博客
05-07 1972
首先，用到是react中的tinper中的组件表，实现的表格，发现要想实现当前页面内容占满时，自动换页，并在下一页中增加标题和表头。因为这个组件是封装的，你取不到啥时候要分页的值的地方。后来用原始的table,tr,td进行编辑，虽然获取到了要分页的地方，并为加上分页。但是加上标题，这个标题还是在table中，这样样式就不行了。最后有用其他办法，ul，li，和ul的样式display:inline...
table中的换行问题
weixin_30871905的博客
02-27 146
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose...
浏览器打印长table时按页拆分
shuxiaoxii的博客
04-24 1238
js解决 长table 打印 拆分问题.
html中如何设置表格分页,html中table表格分页(修订了的)
weixin_42317885的博客
07-02 5467
html中表格分页,并设定的每页10条数据,不含表头/p>"http://doc.xuehai.net/TR/html4/loose.dtd">分页表格var mytable;var my_new_table;var my_href1;var my_href2;var temp1=0;var temp2=0;var flag1 = false;var flag2 = false;var...
MVC如何让table分页完全占据，如何解决table分页分离
冷秋凋零你可知的博客
11-21 525
MVC如何让table分页完全占据，如何解决table分页分离 说明：这个占据100%分页，是适用于以下分页模板使用的 没有占据100% 占据了100% 这是分页100%占据代码，请把它写在要加载的table后面 $(&amp;quot;.bsgridPaging pagingLittleToolbar noPageSizeSelect&amp;quot;).css(“min-width”, “100%”);//分页100%占...
css分页样式_样式CSS打印分页符
culuo8053的博客
07-27 528
css分页样式It's important to construct your websites in a fashion that lends well to print. I use a page-break CSS class on my websites to tell the browser to insert a page break at strategic points on t...
页面打印表格换页问题
ravenYoung的博客
06-16 2557
在打印一个html页面时，会出现table数据过长，需要分多个页面打印，这时候会出现一行切成两行，导致表格行错乱。
web用css来实现打印效果的时候，最后一个div保持在界面最下方
zheshiid233的博客
08-22 433
假设每个打印页可以显示10行记录，当有13行的时候，通过调整margin-top的值，把这个div放到界面最下方了，复合我想要的效果，但是当数据为15行的时候，可能就会把它顶到下一页去了。发现打印的高度是根据table表格的内容会自动扩展，如果这个最后一个div直接修改margin-top。到最后一页的时候会判断当前页面的实际行数与最大可以显示的行数差多少然后进行补充tr来占位置。这样还会有一个问题就是tr里边内容过长的时候会把它撑高，所以最好显示tr的内容或者把它的高度设置高点，尽量避免这个问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值