javascript - 用 window.print() 打印大表只打印一页

Question

我有一个带有非常宽的报告表的网页——几十列，相当多的水平滚动。当我尝试使用 window.print() 打印页面时，浏览器（Firefox 或 Chrome）只打印一页并切断其余页面。

有没有办法告诉浏览器打印整个网页，即使这意味着将表格溢出到更多（纸质）页面？

该表目前没有以任何方式显示或打印的样式。

Answer 1

Print a very wide HTML table without clipping right hand side and Print Stylesheets for pages with long horizontal tables seem to indicate you are kinda screwed if you must take a CSS only approach. The only thing I can think of might work (and yes, I tried) is something a little insane like

<style media="print">
table, table * {
 display:inline-block;
}
table tr {display:block;}
table td {padding:10px;}
</style>

which, of course, attempts to do away with the normal table styles.

See http://jsfiddle.net/jfcox/WTRxm/ and, apparently for a printable version http://jsfiddle.net/jfcox/WTRxm/show/

Seems to work in Firefox and Chrome (that is, it flows the cells around as inline blocks for each row) I don't know what the standards say about this, though. Mileage may vary.

Edit: as a bonus, it seems it's not too hard to add counters to the cells so that you know what column a cell was in (only tested in chrome).

<style media="print">
table, table * {
 display:inline-block;
}
table tr {display:block;
    counter-reset: section; }
table td {padding:10px;}
table td:before {
    counter-increment: section;
    content: counters(section, ".") " ";
}    

</style>

Answer 2

该表目前没有以任何方式显示或打印的样式。

这是为什么？你最好为打印编写一个指定的样式表，因为没有办法强制（欺骗）浏览器打印水平滚动的内容，既不是通过 JavaScript 也不是通过 CSS。

要么以其他方式破坏表格数据，要么为此目的使用样式表。

这是一篇关于在 A List Apart 上编写用于打印的 CSS的文章，以帮助您入门，祝您好运。

Answer 3

您可以创建一个 print.css 来设置打印页面的内容样式。将其链接到您的页面：

<link rel="stylesheet" type="text/css" media="print" href="print.css" />