媒体打印景观不起作用 - html css

Question

我在我的角度 html 页面中使用以下媒体打印类：

@media print {
  @page {
    size: landscape !important;
    orientation: landscape !important;
    max-height: 100%;
    max-width: 100%;
  }
  .no-print,
  .no-print * {
    display: none !important;
  }
  body {
    -webkit-print-color-adjust: exact;
  }
  canvas {
    height: auto;
    width: auto;
  }
  .printClass {
    display: inline-block;
  }
}

但是，它总是尝试打印肖像。有谁知道我做错了什么？

Answer 1

您可能想要删除大小和方向属性中的 !important 指令，并确保将媒体打印类应用于您想要影响的元素。此外，检查是否有任何其他样式或媒体查询与此媒体打印类冲突，并删除或修改它们。

这是更正后的媒体打印类，它应该确保页面以横向打印：

@media print {
  @page {
    size: landscape;
    orientation: landscape;
    margin: 0;
  }
  body {
    -webkit-print-color-adjust: exact;
  }
  .no-print,
  .no-print * {
    display: none;
  }
  .printClass {
    display: block;
  }
}

此媒体查询将 @page 规则的大小和方向属性设置为横向，删除边距，并将正文的 -webkit-print-color-adjust 属性设置为精确。打印页面时隐藏 .no-print 类及其后代，并且 .printClass 类设置为阻塞。