很多站长朋友们都不太清楚html怎么打印分页打印，今天小编就来给大家整理html怎么打印分页打印，希望对各位有所帮助，具体内容如下：
本文目录一览： 1、 怎样在html里面制作表格然后打印时候自动分页 2、 用html横向、多页的分页打印，打印不出来，怎么办？ 3、 通过html导出PDF如何分页 4、 报表输出成html怎么实现分页 怎样在html里面制作表格然后打印时候自动分页页面在初始化加载数据较多时会非常耗时，如果只加载表格，用户再根据自己的需要通过条件查询数据，就会节约一些时间，提高用户体验，所以在初始化datagrid时想只加载表格不加载数据，做到数据与表格加载分离的效果。
经过实验发现，使用.datagrid（）方法时，参数中只要有URL存在，都会自动调用一次加载数据，可设置url参数为null，则加载表格时就不会向后台发出请求；但是此时如果用户想重置页面条件，重新加载页面时，由于没有请求后台，只加载表格，则会发生页面条件清空，表格数据还在或者表格数据为空分页展示的记录却不为0的现象，所以也需要重置数据和分页参数，具体代码如下：
[javascript] view plain copy
/**
* dataGrid初始化表格
* @param id datagrid的id
* @param column 展示的列名
* @param opt 设置自定义datagrid属性
*/
function commonInitDataGrid(id, column, opt){
var initData =
{
"code":100,
"msg":"",
"data":{"totalDataCount":0,"totalPageCount":0,"list":[],"properties":{"footer": []}}
};
//校验参数
if(isEmpty(id) || isEmpty(column)){
jQuery.messager.alert("系统提示", "系统错误，请联系技术人员！");
return;
}
//默认属性
var defaultOpt= {
"url": null,
"method": 'POST', //请求方式
"columns": column,
"width": document.body.clientWidth < 756 ? 756 - 18 : document.body.clientWidth - 18,
"remoteSort": false,
"rownumbers": true,
"pagination": true,
"showFooter": true,
"fitColumns": true,
"pageNumber": 1,
"pageSize": 20,
"pageList": [10, 20, 30, 50, 100],
"singleSelect": true,
"striped": true,
"loadFilter": function (result) {
if (result.code == "100") {
//解析json结果集，返回给datagrid
var obj =
{
"total": result.data.totalDataCount,
"rows": result.data.list,
"footer": result.data.properties.footer
};
return obj;
} else {
jQuery.messager.alert("系统提示", result.msg);
return false;
}
}
}
if(!isEmpty(opt)){
//替换自定义属性
$.extend(defaultOpt, opt);
}
//把属性与事件放到表格中，进行初始化
$("#" + id).datagrid(defaultOpt);
$("#" + id).datagrid('loadData', initData);
}
说明：1.设置URL为null后，则每次调用此方法都只会加载表格，不加载数据，调用此方法时就不需要再调用此方法之前设置URL了；
2.pageSize的参数不在pageList之中时，页面分页会默认取pageList中的第一个参数，此时pageSize设置无效。
3.loadFilter方法是为了处理后台返回的结果，并自动传给datagrid进行处理然后展示在页面
用html横向、多页的分页打印，打印不出来，怎么办？能用CCS? 我想用浏览器打印网页，但是碰到分页的问题 是否能在html中插一个分页符，让程序可以控制分页？ 如没有.除非是按打印纸大小编的页面.
其实这个问题应该不关HTML事,而是IE打印功能太弱啦,没有分页,只有自己写控件了.
有分页的，需要使用css 这是有关打印的一些css属性
属性 版本 兼容性 继承性 简介
page CSS2 IE5.5+ 有 检索或指定显示对象容器时使用的页面类型（pagetype）。参阅@page规则
page-break-after CSS2 IE4+ 无 检索或设置对象后出现的页分割符
page-break-before CSS2 IE4+ 无 检索或设置对象前出现的页分割符
page-break-inside CSS2 NONE 有 检索或设置对象容器中出现的页分割符
marks CSS2 NONE 无 设置或检索什么样的标志是应该在页容器外边被给予
orphans CSS2 NONE 有 设置或检索对象内容内一定要留在一页范围底端以内的行的最少数量
size CSS2 NONE 有 检索或指定页面规格的调整
widows CSS2 NONE 有 检索或指定一定要留在页面顶部的行数
---------------------------------------------------------------
分页的时候一般用到page-break-after和page-break-before
page-break-after版本：CSS2 兼容性：IE4+ 继承性：无
语法：
page-break-after : auto | always | avoid | left | right | null
参数：
auto : 假如需要在对象之后插入页分割符
always : 始终在对象之后插入页分割符
avoid : 避免在对象后面插入页分割符
left : 在对象后面插入页分割符直到它到达一个空白的左页边
right : 在对象后面插入页分割符直到它到达一个空白的右页边
null : 空值。IE5用来取消页分割符设置
说明：
检索或设置对象后出现的页分割符。
IE5仅支持always值和空白值（null）。
在IE4中此属性不作用于br对象，但是IE5作用。
对应的脚本特性为pageBreakAfter。请参阅我编写的其他书目。
示例：
p { page-break-after: always;}
page-break-before版本：CSS2 兼容性：IE4+ 继承性：无
语法：
page-break-before : auto | always | avoid | left | right | null
参数：
auto : 假如需要在对象之前插入页分割符
always : 始终在对象之前插入页分割符
avoid : 避免在对象前面插入页分割符
left : 在对象前面插入页分割符直到它到达一个空白的左页边
right : 在对象前面插入页分割符直到它到达一个空白的右页边
null : 空值。IE5用来取消页分割符设置
说明：
检索或设置对象前出现的页分割符。
IE5仅支持always值和空白值（null）。
在IE4中此属性不作用于br对象，但是IE5作用。
对应的脚本特性为pageBreakBefore。请参阅我编写的其他书目。
示例：
p { page-break-after: always;}
---------------------------------------------------------------
举一个例子吧：
<HTML>
<HEAD>
<STYLE>
P {page-break-after: always}
</STYLE>
</HEAD>
<BODY>
<P>这是第一页的内容</P>
<P>这是第二页的内容</P>
剩下是第三页的内容
</BODY>
</HTML>
你在打印预览的时候就能看出效果了。
通过html导出PDF如何分页如果你用虚拟打印机打印，文档就会按虚拟打印机里设置的页面尺寸自动分页。
1、如果你的浏览器有虚拟的PDF打印机的，请你PDF虚拟打印机打印你要输出的内容，即可得到你要的PDF文档。
2、如果用其它浏览器，没有虚拟的PDF打印机的，请你安装Adobe Acrobat XI Pro软件，在WORD中用Adobe PDF打印机打印你要输出的内容，即可得到你要的PDF文档。
报表输出成html怎么实现分页用Jatools打印插件，目前好像都是收费的版本，但我在网上找到个免费的版本就拿来用了，做的练习。
可实现分页，打印。
<script type="text/javascript">
function JatoolsPrinterViewPDFReport(page){
var frm = document.getElementById("toolsForm");
var url = "<%=webapp %>/B1F216Action.do?method=JatoolsPrinterViewPDFReport";
url+="page="+page;
frm.action=url;
frm.target='_self';
frm.submit();
}
function doPrint(how)
{
//打印文档对象
var myDoc = {
documents:document, // 打印页面(div)们在本文档中
copyrights:'杰创软件拥有版权 '
};
// 调用打印方法
if(how == '打印预览...')
jatoolsPrinter.printPreview(myDoc,true ); // 打印预览
else if(how == '打印...')
jatoolsPrinter.print(myDoc ,true); // 打印前弹出打印设置对话框
else
jatoolsPrinter.print(myDoc ,false); // 不弹出对话框打印
}
<body style="margin:10px;">
<html:form styleId="toolsForm" method="post"
action="/B1F216Action.do?method=JatoolsPrinterViewPDFReport"
enctype="multipart/form-data">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%"> </td>
<td align="left">
<hr size="1" color="#000000">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="10%" align="left"><img src="<%=webapp
%>/jasReports/images/reload.GIF" border="0"
onclick="JatoolsPrinterViewPDFReport(0);"></td>
<td> </td>
<%
if (pageIndex > 0)
{
%>
<td>
<img src="<%=webapp %>/jasReports/images/first.GIF" border="0" onclick="JatoolsPrinterViewPDFReport(0);">
<img src="<%=webapp
%>/jasReports/images/previous.GIF" border="0"
onclick="JatoolsPrinterViewPDFReport(<%=pageIndex - 1%>);">
</td>
<%
}
else
{
%>
<td>
<img src="<%=webapp %>/jasReports/images/first_grey.GIF" border="0">
<img src="<%=webapp %>/jasReports/images/previous_grey.GIF" border="0">
</td>
<%
}
if (pageIndex < lastPageIndex)
{
%>
<td>
<img src="<%=webapp %>/jasReports/images/next.GIF"
border="0" onclick="JatoolsPrinterViewPDFReport(<%=pageIndex +
1%>);">
<img src="<%=webapp %>/jasReports/images/last.GIF"
border="0"
onclick="JatoolsPrinterViewPDFReport(<%=lastPageIndex%>);">
</td>
<%
}
else
{
%>
<td>
<img src="<%=webapp %>/jasReports/images/next_grey.GIF" border="0">
<img src="<%=webapp %>/jasReports/images/last_grey.GIF" border="0">
</td>
<%
}
%>
<td width="50%" align="center">
<input type="button" value="打印预览..." onclick="doPrint(this.value);">
<input type="button" value="打印..." onclick="doPrint(this.value);">
<input type="button" value="直接打印" onclick="doPrint(this.value);">
</td>
</tr>
</table>
<hr size="1" color="#000000">
</td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td align="center">
<%=sbuffer%>
</td>
<td width="50%"> </td>
</tr>
</table>
</html:form>
</body>
后台代码
// 1.html显示
JRHtmlExporter exporter = new JRHtmlExporter();
//设置导出参数
request.getSession().setAttribute( BaseHttpServlet.DEFAULT_JASPER_PRINT_SESSION_ATTRIBUTE, jasperPrint);
exporter.setParameter(JRExporterParameter.JASPER_PRINT, jasperPrint);
exporter.setParameter(JRExporterParameter.OUTPUT_WRITER, out);
exporter.setParameter(JRHtmlExporterParameter.IS_USING_IMAGES_TO_ALIGN, Boolean.FALSE);//页面显示图片为X，可设置false
exporter.setParameter(JRExporterParameter.CHARACTER_ENCODING, "GBK");
int pageIndex = 0;
int lastPageIndex = 0;
if (jasperPrint.getPages() != null)
{
lastPageIndex = jasperPrint.getPages().size() - 1;
}
String pageStr = request.getParameter("page");
try
{
pageIndex = Integer.parseInt(pageStr);
}
catch(Exception e)
{
}
if (pageIndex < 0)
{
pageIndex = 0;
}
if (pageIndex > lastPageIndex)
{
pageIndex = lastPageIndex;
}
StringBuffer sbuffer = new StringBuffer();
exporter.setParameter(JRExporterParameter.PAGE_INDEX, Integer.valueOf(pageIndex));
exporter.setParameter(JRHtmlExporterParameter.HTML_HEADER, "");
exporter.setParameter(JRHtmlExporterParameter.BETWEEN_PAGES_HTML, "");
exporter.setParameter(JRHtmlExporterParameter.HTML_FOOTER, "");
exporter.setParameter(JRExporterParameter.OUTPUT_STRING_BUFFER, sbuffer);
request.setAttribute("pageIndex", pageIndex);
request.setAttribute("lastPageIndex", lastPageIndex);
request.setAttribute("sbuffer", sbuffer);
//此处就是html导出方式，打印部分在页面通过插件实现
exporter.exportReport();
关于html怎么打印分页打印的介绍到此就结束了，不知道本篇文章是否对您有帮助呢？如果你还想了解更多此类信息，记得收藏关注本站，我们会不定期更新哦。
查看更多关于html怎么打印分页打印 html 打印 分页的详细内容...