相信许多小公司的java开发人员,在工作的时候难免要用到许多的前端的知识(俗称全栈工程师),恐怕有时你写着写着会咒骂道:“我明明是好歹是个java工程师,为什么要然我去写页面这种前端干的活”,但是事实就是:你没办法不写这些代码,哈哈哈~~~
入正题:最近在写一个功能时,需要打印非固定长度表格。看到原项目中用到jqprint这个插件,一看源码!!!就这几行代码,什么鬼!
百度了解了一下,原来它只是用封装了jquery的打印页面....瞬间感觉有点low...
一、果不其然,在我用了我毕生的html编写技术写出一个模板,点击打印,boom! 完全没有样式,挤成一坨!
想想原因,jqprint的div.jqprint()方法是将div生成一个新的ifream,如果你没有import你的样式文件,那当然是没有....
解决方法1、简单粗暴,在需要加样式的html语句上直接加style。(比较蠢,写的样式太多,特别是需要打印的列比较多的时候,js 拼一堆)
解决方法2、更简单粗暴:在link的样式文件后加上media="print"
<link href="demo.css" rel="stylesheet" type="text/css" media="print"/>
二、打印页数较多时(巨坑:使用table标签写出的表格!)
当使用table标签打印时,特别是table刚好到一页底部的时候,tr里的文字:一部分在上一页,一部分在下一页。表格线:当页的线不见了,下一页一行显示了两条线。
这就很尴尬了,找办法啊。百度jquery 强制分页,快到边界的行,我强制调到下一页还不行吗!找到一个好办法
<div style="page-break-after:always"></div>
据说这个办法完美解决了强制分页的问题!但是,又发现两个坑。
坑一:如果在tr的后面添加div。虽然印象中不提倡在table添加div,但是在通过尝试后发现,也不是不可以。
在用$("#container tr")[index]找到需要添加强制分页的行后,使用$("#container tr")[index].after('<div style="page-break-after:always"></div>')发现根本没有效果(可能是前端基础差的问题)。找来一位前端大神发现$("#container tr")[index]只能得到tr的dom元素,并不是jquery的方法。
此处我有点疑惑,到现在还没有解决,为什么在我使用after方法时,为什么没有报错。。。
后来在它上面又套了一层 $( $("#container tr")[index] ).after('<div style="page-break-after:always"></div>') 结果在页面上看,哎呀,确实放到了我需要的位置了。但是接下来,第二个坑。
坑二:在<tr>和<tr>中有了<div style="page-break-after:always"></div> 总能强制分页了吧!
结果发现,第一页是空白,到了第二页,还是原来那个问题!
原因:jqprint在生成ifream严格按照table的标准,不准在table里插入div.这。。。。
解决方法(无用版):我在tr后面添加</tbody></table> <div style="page-break-after:always"></div> <table><tbody>,把你分成两个table,中间放一个强制分页,ok?在手写的demo 没有用js插入的情况下看,确实有用。但是,在使用jquery的after方法后显现的是,我在<tr>的后面加了一个完整的<table><tbody></tbody></table>,当时还以为是自己写错了,仔细看看,并没有!
我想那我直接插入一个</tbody></table>会发生什么呢?
发生的情况是:什么都没发生,我的</tbody></table>仿佛人间蒸发了。
解决方法(有用,但是废话版):只有在使用jquery向前台插入html时,计算好一页能打印多少行,然后使用<table</table>+强制分页div+<table></table>的方法实现分页打印