在多个浏览器中打印网页

Question

问题摘要：

我有一个页面显示一个html表，其中单元格大约100px / 100px。此表可以是从1列/行到N列/行的任何位置，但我需要创建一个系统，可以在所有浏览器中正确打印此文档。

到目前为止我尝试了什么：

我目前的解决方案使用了另一个SO问题的答案：https://stackoverflow.com/a/19582173/781884

当前解决方案的问题

在使用Chrome的某些情况下，此解决方案的效果相对较好。问题是很多用户使用IE7并且效果不佳，尤其是在打印大型表时。

我可能的解决方案：

1. 创建一个利用当前系统的按钮，但它会切断＆＃34;多个不同宽度的页面允许以水平/垂直/ a3（水平和垂直）打印。这绝对是最快的解决方案，但它仍然留下了IE7无法正常工作的可能性，它打印的表根本没有任何意义（在某些条件下会发生）
2. 创建页面的PDF文件（包含多个不同的大小变体），以允许用户导出所需的大小。这个问题是我需要投入的时间来看看如何做到这一点并克服我们对非常大的表所遇到的任何问题。就投资/利益而言，这是迄今为止风险最大的
3. 第三个选项显然是废弃了整个想法，并将页面的逻辑更改为没有表格，但以不同的方式显示数据。这将优选地避免。

Answer 1

我认为第一个解决方案是最简单的工作方式。问题是，为什么它不适用于IE7？你有桌子或其他东西的花式格式吗？你的jQuery版本是否支持IE7？等等。

因为您知道单元格的确切大小，所以您可以在N x M单元格上拆分表格，无论您在打印页面上最适合N和M。如果您有普通表并且使用支持jQuery版本的IE7，那么这应该没有任何问题。确保表格中没有任何行/ colspan错误，并且所有HTML都有效。

Answer 2

最佳解决方案是使用某些框架，如bootstrap或其他人所说的数据表。我向你保证它会解决你的问题并且值得研究。使用这些框架，您可以使用js生成表，这是一个非常优雅的解决方案。

此外，bootstrap框架具有响应能力，因此可以在所有最新浏览器和所有尺寸中显示出色。它将根据浏览器的视口大小对齐表格。

数据表框架也做了几乎相同的事情。但唯一的区别是它提供了一些排序和其他排序功能。基本上它建立在bootstrap之上

Answer 3

快速解决方案：使用响应式框架谎言引导程序：

http://getbootstrap.com/css/#tables

然后是.table-responsive

通过打印媒体查询给出最后的触摸，基于它应该看起来如何。

或仅限jquery的解决方案：https://datatables.net/

你的JungerIslaender

Answer 4

使用bootstrap框架工作肯定有助于跨浏览器兼容性。 Bootstrap还使您可以非常轻松地配置要在打印输出中显示的页面元素。使用Chrome，您实际上也可以直接保存到PDF，这很酷。

这是我网站上的working example。