Question

我在@media print中有一个有效的modal查询。然后我添加了一个也具有PRINT功能的图表。当我在图表中尝试PRINT时，它在Chrome打印对话框中没有显示任何内容。我想是因为@media print。

如何在modal中添加chart的相同功能？

CSS媒体打印：

@media print {
  @page {
    size: auto; 
    margin: 3mm;
    margin-right: 57mm;
    margin-left: 57mm
  }

  body * {
    visibility: hidden;
  }
  #admissionSlip * {
    visibility: visible;
    overflow: visible;
  }
  #chart * {
    visibility: visible;
    overflow: visible;
  }
  #mainPage * {
    display: none;
  }
  #printBtn {
    display: none;
  }
  .modal {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    min-height: 550px;
    visibility: visible;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;
  }
  .modal-dialog {
    visibility: visible !important;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;
  }
  li {
    page-break-after: auto;
  }

  /* Chart */

  .panel {
    visibility: visible !important;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;
  }
}

Answer 1

我通过不太好的想法解决了它，但它做了我需要的。

我将css media print和chart的{{1}}文件分开，并在每个modal文件中引用它。

我知道这不是一个好主意，而且可能不是最佳做法，但它可以满足我的需要。感谢。

CSS媒体打印查询

1 个答案: