jqprint 打印 table的一些坑

相信许多小公司的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>的方法实现分页打印