投稿
  1. 首页
  2. 随笔

怎样在html里面制作表格然后打印时候自动分页

问题事件名称appcrash • 2023-3-15 • 随笔 • 阅读 16

怎样在html里面制作表格然后打印时候自动分页,第1张

页面在初始化加载数据较多时会非常耗时，如果只加载表格，用户再根据自己的需要通过条件查询数据，就会节约一些时间，提高用户体验，所以在初始化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进行处理然后展示在页面

能用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>

你在打印预览的时候就能看出效果了。

用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:'杰创软件拥有版权 www.jatools.com'

}

// 调用打印方法

if(how == '打印预览...')

jatoolsPrinter.printPreview(myDoc,true ) // 打印预览

else if(how == '打印...')

jatoolsPrinter.print(myDoc ,true) // 打印前d出打印设置对话框

else

jatoolsPrinter.print(myDoc ,false) // 不d出对话框打印

}

<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()

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6121920.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
问题事件名称appcrash 问题事件名称appcrash 一级用户组
0 0
上一篇 2023-03-15
下一篇 2023-03-15

发表评论

登录后才能评论

评论列表（0条）

保存