无法从角度 2 更改 chrome 浏览器中打印的边距和布局答案

【问题标题】：Unable to change the margin & layout for printing in chrome browser from angular 2无法从角度 2 更改 chrome 浏览器中打印的边距和布局
【发布时间】：2019-06-13 12:15:58
【问题描述】：

我正在尝试打印 HTML，但我无法更改 chrome 浏览器 的 layout 和 margin（请参阅附图片）。

PRINT() {
  window.print();
}

@media print {
  .doNotPrint {
    display: none;
  }
  * {
    -webkit-print-color-adjust: exact;
  }
  @page {
    margin: 0 !important;
    size: A4 Landscape !important;
    -webkit-print-color-adjust: exact;
  }
  html,
  body {
    margin: 0 !important;
    size: A4 Landscape !important;
    -webkit-print-color-adjust: exact;
  }
}

<form [ngClass]="themeSRVC.currentThemeNAME" fxLayout="column" fxFlex>
  <!-- navBAR -->
  <mat-toolbar id="idPrimaryTOOLBAR" color="primary" class="doNotPrint">
    <mat-toolbar-row>
      <button mat-icon-button type="button" (click)="routeSRVC.goBACK()">
        <mat-icon matTooltip="Go Back">arrow_back</mat-icon>
      </button>
      <span class="fillSPACE"></span>
      <button mat-icon-button (click)="PRINT()">
        <mat-icon matTooltip="print">print</mat-icon>
      </button>
    </mat-toolbar-row>
  </mat-toolbar>

  <!-- *****printableCONTENT***** -->
  <div id="idToPRINT" fxFlex>

    <div fxLayout="row">
      <div fxFlex="33" style="height:200px;background-color:red">Left</div>
      <div fxFlex style="height:200px;background-color:yellow">Center</div>
      <div fxFlex="33" style="height:200px;background-color:green"> Right</div>
    </div>


  </div>

</form>

我错过了什么..？请帮我删除边距并更改布局。

【问题讨论】：

请遵守您的 CSS 类/ID 名称中的命名约定：en.m.wikipedia.org/wiki/Naming_convention_(programming)
你的意思是我的命名约定导致了这个问题？？如果是这样，您能否指出我的 CSS 中的哪个名称是错误的。
我只是说您应该遵守命名约定。并不是说您的约定会导致问题。

标签： angular google-chrome media-queries printing-web-page

【解决方案1】：

经过数小时的研究……我终于弄明白了。！

在应用的全局 styles.scss 中设置 @media 样式。
component.scss中的
NOT

如果您想将布局动态更改为纵向/横向，您可以执行以下操作

1) 从全局 scss
中删除@media print{...}
2) 并在您的 component.ts 中通过传递 true/false 调用打印函数

PRINT(landscape: boolean) {
  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';
  style.media = 'print';

  style.appendChild(document.createTextNode(landscape ?
    '@page { size: A4 landscape; margin: 0in;}' :
    '@page { size: A4;  margin: 0in; }'));

  head.appendChild(style);
  window.print();
}

【讨论】：

【解决方案2】：

我知道这个帖子可能很旧。但是，如果您使用 CSS 编程并且想要打印但您的布局选项未显示，请添加此 CSS 行

“@media print { @page {size: auto !important} }”到你的样式表

我有类似的问题，但能够使用上面的代码解决。代码来源来自@yeshwanthkv (@https://stackoverflow.com/users/3902260/yeshwanthkv) 的此线程Bootstrap 4 CSS causing Chrome's print "Layout" to disappear

【讨论】：