javascript - CSS 媒体打印查询

Question

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

如何在我的图表中添加与modal相同的功能？

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

我用不太好的主意解决了它，但它满足了我的需要。

我将 chart 和 modal 的 media print 的 css 文件分开，并在每个 上引用它>html 文件。

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