在景观中打印html表格

Question

我有一个从数据库动态生成的报告，这个报告的某一部分应该打印在一个表内。我想把这张表打印在横向轮廓上，把报告的其余部分正常打印成“纵向”。

那么，有什么办法可以做到这一点吗？

Answer 1

如果您创建了一个表格，并将其视为相对于页面的100%宽度，则打印机应自动打印为整个页面宽度。是横向打印还是纵向打印取决于实际打印时在打印设置中选择的是哪一种。唯一能够干净利落地完成此任务的方法是创建两个独立的html文档--一个包含纵向部分，另一个包含横向部分。然后分别打印每个文档。

理论上只有两种方法可以完成这项任务: 1)某种浏览器插件，它会为你发送单独的打印作业，找出文档的哪些部分应该以哪种方式打印。

2)使用CSS3变换。生成要打印的表格的静态图像，然后将其在页面上变换(旋转) 90度，使其在屏幕上横向显示。如果您旋转了文档的某些部分，那么理论上您可以在一个作业中完成整个工作。但别浪费你的时间。这将是一场彻头彻尾的噩梦。尤其是如果你不得不问怎么做的话。

Answer 2

你可以在CSS中设置@page属性，参见下面的代码：

@media print{@page {size: landscape}}

Answer 3

你可以这样把桌子旋转90度：

​

   <div style="display: block; margin: 0; break-before: page; width: 297mm; height: 210mm; transform: rotate(270deg) translate(-296mm, 0);
    transform-origin: 0 0;" >

 <table style="word-wrap: break-word; table-layout: fixed; width: 100%;">
   <tr><td>A row</td></tr>
 </table>
</div>

​

自动换行和表格布局样式对于将表格保留在页面内而不覆盖自身是必要的。您可能需要处理div中的宽度、高度和翻译值，但这些对我的A4页面很有效。它适用于我在Chrome没有检查过的其他浏览器。