Question

所以这是我的问题，我试图使用window.print在react中打印一些组件，我的组件定义了大小，例如5cm x 5cm，我在打印页面中隐藏了所有其他组件（请注意，整个页面在此处发布有点复杂），问题是在打印页面上调整组件的大小。我看了很多，但没有任何效果。请注意，当我在不同的页面（没有复杂样式）中测试相同的打印件时，它工作正常。那么，有什么方法可以将样式传递到打印窗口或“覆盖”样式，以便正确呈现我的组件？谢谢。

编辑：这是我的CSS。这在一个新的应用程序中运行良好，因此必须使用一些混乱的东西，我从引导css文件中删除了所有@media打印，但没有运气。我试图将代码放在@media的内部和外部也没有运气。据我所知，媒体应呈现真实的物理长度和单位，将不胜感激。再次感谢

  .print-only{
  display: none;
}

@media print {

  @page {
    margin: 0; 
    size: a4 !important;
  }
    body{
      margin: 0.5cm !important;
      padding: 0;
   }

  .print-only{
    margin-top: 20px;
    display: block;
  }

  .no-print {
    width: 100%;
    margin: 0px;
    display: none;
}

.Container{
  position: relative;
  display: block;
  border: 3px solid black;
  width: 6in !important;
  height: 2in !important;
  margin: 0; 
  padding: 0;
  text-align: start;
}

   .labels{ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
    font-size: 6pt; 
    font-style: normal; 
    font-variant: normal;
    height: 13px;
  }




.container2{
  height: 39px;
  font-size: 8px;
  font-weight: 550;
  position: absolute;
  top: 20px;
  right: 1in;
  line-height: 13px;
  text-align: center;
}


}

Answer 1

最近，我在React中设计打印模板时遇到了同样的问题。我的理解是完全错误的，因为我在CSS文件中编写的任何样式都将适用。然后我发现在设计HTML打印模板时需要遵循某些语义。

看看这个link。这将对您的设计非常有帮助。

在打印窗口中反应组件尺寸变化

1 个答案: