Print.CSS 强制元素出现在最后一页答案

【问题标题】：Print.CSS forcing element to appear on last pagePrint.CSS 强制元素出现在最后一页
【发布时间】：2016-03-14 13:26:13
【问题描述】：

我已经进行了一些研究，试图解决这个问题，但找不到任何可以帮助我的东西。

这可能看起来很草率，所以我会尽力解释。

在我的网页上，我有一堆表格，其中的图表表示与表格相同的数据，但它为用户提供了数据的视觉效果。

我创建了一个 Print.CSS 样式表，但我不知道如何让所有的图表都出现在要打印的最后一页上。有没有办法做到这一点？

下面是我目前正在处理的打印方面的更多视觉效果：

table1
graph1

table2
graph2

table3
graph3

我要打印的内容是这样的：

table1 // page 1

table2 // page 2

table3 // page 3

graph1 // page 4

graph2 // page 5

graph3 // page 6

我试过了：

#graph1, #graph2, #graph3{
    page-break-before: always; // to put the graphs on their own page
}

但这只是将表格放在自己的页面上，然后将相应的图表放在下一个页面上，依此类推。

如何首先将所有表格放在最后一个表格之后的页面上，然后将图表 1 放在图表 1 之后的页面上，等等？

感谢任何帮助。

【问题讨论】：

不确定这是否适用于打印，但您可以尝试使用display:flex:jsfiddle.net/fhjvxftt/1
@Pete 我刚刚尝试过，但没有成功。一切都保持不变。

标签： html css

【解决方案1】：

这应该对您有用，您将标记按打印顺序放置并使用flex 更改屏幕顺序。

.wrapper {
  display:flex;
  flex-direction:column;
}

@media screen and (min-width: 0) {
  
  .gph {
    margin-bottom: 10px;
  }
  
  .nr1 {
    order:1;
  }
  .nr2 {
    order:2;
  }
  .nr3 {
    order:3;
  }
  
}

<div class="wrapper">
  <div class="tbl nr1">table 1</div>
  <div class="tbl nr2">table 2</div>
  <div class="tbl nr3">table 3</div>
  
  <div class="gph nr1">graph 1</div>
  <div class="gph nr2">graph 2</div>
  <div class="gph nr3">graph 3</div>
</div>

【讨论】：

我没有机会使用它，因为在您发布之前我能够找到不同的解决方案，但感谢您的回答。不胜感激。

【解决方案2】：

我实际上刚刚开始工作。我的图表和表格都是局部视图。我在主视图中使用这些局部视图。在我所有的局部视图中，我的图表都是<img> 的，所以这就是我在每个局部视图中所做的：

<img class="print-hide" src='@Url.Action("actionName", "controllerName")' /> // print-hide is on my Print.CSS with display: none

这样，当我打印时，它会在表格之后隐藏 img（图形）......然后在我的主视图中，我在所有调用相同图像的表格之后创建了一个部分：

<section>
    //graph1 
    //graph2
    //etc
</section>

所以当我现在打印时，它会隐藏部分视图中的图表，但它们在我的主视图中，在所有表格之后。

【讨论】：