Question

我有一个包含一些数据的html表，如果以横向模式打印，它看起来会好得多。

到目前为止，css代码是：

@page {
    size: landscape;
    max-height:100%; 
    max-width:100%;
    margin-top: 1.2cm;
    margin-bottom: 1.2cm;
    margin-left: 1cm;
    margin-right: 1cm;
    width: 276mm;
    height: 190mm;
}

当你像这样打印时，所有具有一些引导规则的div（例如col-xs-6）都没有正确打印，这意味着它们打印时边缘较大（两边至少7-8cm）侧）。

我不明白为什么这只发生在风景中，如果我改变css以纵向打印，它打印正确！

我注意到，当我在打印预览（chrome）中并且如果我选择A5而不是默认的A4尺寸纸张时，神奇地打印预览显示正确打印的表格，但当然我无法继续这样打印是因为打印机要求A5纸。

知道为什么会这样吗？

ps。：刚刚发布了打印css代码，因为除了bootstrap之外，表格上没有代码，而且这些代码可能会破坏打印。

ps2：在打印之前使用chrome上的开发工具，如果我选择包含表格的div并删除col-xs-12给出的100％宽度，它会部分修复打印预览中的布局，所以我'我很确定它与boostrap有关

Answer 1

经过多次试验，我自己找到了一个有效的解决方案，

@page {
    size: A4 landscape;
    size: 287mm 210mm;
}

老实说，我不知道它为什么会起作用，但是当我将尺寸定义为287mm而不是默认的A4宽度297mm时，它会神奇地修复它自己

使用CSS（Bootstrap）无法在A4大小的横向上正确打印

1 个答案: