反应，打印机友好的可打印区域进行打印（Ctrl + P）

Question

在我的React Application（使用semnaticUI中）中，我在视图中呈现了多个组件，但是当用户想要打印页面时（例如，通过在浏览器中按Ctrl + P），我只希望其中一部分可打印

例如，如果这是用户看到的屏幕截图，则触发浏览器打印时，应在打印概述中显示绿色区域。

到目前为止，我已经在scss文件中

Private Sub Worksheet_SelectionChange(ByVal Target As Range)
    ' If change was outside range we are interested in, then quit Sub
    If Intersect(Target, Range("E2:E709")) Is Nothing Then Exit Sub

   ' store reference to cell in F column for simplicity
    Dim c As Range: Set c = Target.Offset(0, 1)
    ' check if cell in F column has any value, if not, then assign it 1
    If c.Value = "" Then
        c.Value = 1
    ' else increment it by one
    Else
        c.Value = c.Value + 1
    End If
End Sub

添加到不需要的组件中会使它们消失，但在打印区域中仍然留有空白，并且绿色部分没有填充页面，如果该绿色部分是可滚动的并且应该适合几页，我也只会看到一页（一张A4包含我在屏幕上看到的内容的纸）

具有

    @media print{    
    .no-print, .no-print *{  display: none !important;}
     }

无法使用，但仍获得相同的可打印视图 这是此屏幕截图的代码

@media print {
  .print-content {
    display: block;
    width: 100%;
    height: 100%;
    page-break-after: always;
    overflow: visible;
  }
}

Answer 1

请勿将此作为涵盖您所有用例的最终解决方案。但是您可以尝试使用此代码段提示，看看它是否可以解决您的问题。在我最近的项目中，我有一个类似的任务，这种方法可以根据需要工作。

@media print {
  @page {
    size: landscape;
  }
  body * {
    visibility: hidden;
  }
  .section-to-print, .section-to-print * {
    visibility: visible;
  }
  .section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

它将隐藏页面上的所有内容。然后将.section-to-print类添加到要打印的区域。除非您有覆盖它的CSS，否则它应该按照您希望的方式工作。

重要的一点是，如果您在全局范围内拥有此CSS，它将隐藏所有没有.section-to-print的内容，并且打印页面将为空白。因此，仅在需要时才将其注入样式表可能是明智的。

让我知道是否有帮助。