Question

我在Chrome浏览器中发现了一个非常奇怪的行为（我目前的版本是54.0.2840.59）;当我尝试打印预览我开发的html页面时，它会截断页面内容，预览的内容比我的内容少。所有内容都是重复的，因此特定元素不可能触发该问题。另一方面，当我在其他浏览器（如IE11，Edge，Firefox，Safari）中打印预览同一页面时，我看到了整个内容！以下是Chrome在打印预览模式下的屏幕截图： print preview truncates the rest of the page

在图像中，您可以清楚地看到打印预览中的滚动结束，但仍有很多内容...... 另请注意，我已经在Windows 10，iO中进行了测试，甚至在隐身模式下进行了测试，以防插件执行此操作。

Answer 1

我刚刚找到了解决方案。我创建的网格是使用bootstrap。这里有一个案例： https://github.com/twbs/bootstrap/issues/12078

我将整个网格更改为显示带有！importants的表格（这解决了我的情况）。虽然在社区中他们已经改变了引导列网格系统以匹配打印宽度，这是更好的解决方案。

无论哪种方式，问题是chrome使用引导布局的XS大小;因此，在我的情况下，它错误地计算了页面高度。

Answer 2

另一种更合适的解决方法是使用以下sass规则：

@media only print{
   // create grid for .col-md to work without media query
   @include float-grid-columns(md);
   @include loop-grid-columns($grid-columns, md, width);
   @include loop-grid-columns($grid-columns, md, pull);
   @include loop-grid-columns($grid-columns, md, push);
   @include loop-grid-columns($grid-columns, md, offset);
}

根据这些规则，您可以使bootstrap med列在打印时被视为正常。

在打印预览时，chrome会截断页面内容，而其他浏览器则不会

2 个答案: