Question

我做了一些研究试图解决这个问题，但我找不到任何可以帮助我的事情。

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

在我的网页上，我有一堆表格，图表表示与表格相同的数据，但它可以让用户看到数据。

我创建了一个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之后的页面上绘制图2，等等？

感谢任何帮助。

Answer 1

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

＆＃13;

.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;
  }
  
}

＆＃13;

<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>

＆＃13;

Answer 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>

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

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

2 个答案: