如何修复用于 iPhone 打印的 CSS答案

【问题标题】：How to fix css for iphone printing如何修复用于 iPhone 打印的 CSS
【发布时间】：2020-01-31 05:32:49
【问题描述】：

我正在使用 Angular 7 平台并创建了照片滑块组件。

在该组件中有一个打印范围，点击它使用 window.print()。

在 mac 和 windows 上，它会全宽打印图像，但在 iPhone 上，图像在一个大的白色内（左侧）很小。

我更喜欢修复我的代码，但如果有任何其他浏览器不遵循 iPhone 上的 Safari 限制并修复它，那么它对我来说也是足够好的解决方案。（铬同样的问题）。

有什么建议吗？

我尝试使用在搜索中找到的媒体查询。
还找到了在 mac (safari) 和 windows (edge/chrome) 上最适合我的指令。 Printing HTML content。

编辑：3：我编辑了我的指令，现在它也可以在 mac 上使用开发工具作为响应式 iPhone safari 很好地打印，但在 iPhone 上它仍然一样，只是现在它增加了 5 个空白页。

指令：

import { HostBinding, Directive, AfterViewInit, OnDestroy } from @angular/core";

@Directive({
    selector: '[print-section]',
  })
  export class PrintSectionDirective implements AfterViewInit, OnDestroy {
    @HostBinding('class.print-section') private printSection = true;
    private style: HTMLStyleElement;

    public ngAfterViewInit() {
      this.style = document.createElement('style');
      this.style.type = 'text/css';
      this.style.innerText = `
      @page {
        size: A4;
        margin: 0;
      }
      @media print {
        body * {
            width:100% !important;
            height:100% !important;
            padding:0 !important;
            margin:0 !important;
            visibility: hidden;
        }
        html, body {
            width: 210mm;
            height: 297mm;
        }
        .print-section, .print-section * {
            width:100% !important;
            height:100% !important;
            padding:0 !important;
            margin:0 !important;
            right: 0;
            left: 0;
            visibility: visible;
            overflow-x:hidden;
        }
        img {
            width:100% !important;
            height:100% !important;
        }
      }`;

      document.head.appendChild(this.style);
    }

    public ngOnDestroy() {
      document.head.removeChild(this.style);
    }
  }

HTML：

<div id="myModal" class="modal" (keydown.ArrowLeft)="previous()" (keydown.ArrowRight)="next()">
    <span class="close" (click)="close()">×</span>
    <span class="print" (click)="print()">Print</span>
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-md-1 d-none d-md-block">
                <button id="right" (click)="next()"><</button>
            </div>
            <div class="col-md-10 col-12" print-section>
                <img class="modal-content" id="orderImage" [attr.src]="getUrl()">
            </div>
            <div class="col-md-1 d-none d-md-block">
                <button id="left" (click)="previous()">></button>
            </div>
        </div>
        <div class="row d-md-none">
            <div class="col-1"></div>
            <div class="col-2 width-100 text-right">
                <button id="right" class="m-1" (click)="next()"><</button>
            </div>
            <div class="col-6 width-100 text-center">
                <button id="print" class="m-1" (click)="print()">Print</button>
            </div>
            <div class="col-2 width-100 text-left">
                <button id="left" class="m-1" (click)="previous()">></button>
            </div>
        </div>
        <div class="row text-center">
            <div id="caption"></div>
        </div>
    </div>
</div>

我希望图像在 iPhone 打印时是全宽的。

【问题讨论】：

标签： angular html css typescript mobile-safari

【解决方案1】：

测试特定于打印的样式的一个好方法是删除 print 媒体查询，直到它在浏览器中根据您的规范设置样式，并且仅在完成后将其应用于打印媒体查询。

在您的情况下，将 img 设置为 100% 宽度会使图像占据其容器的 100% 宽度（在使用非静态定位等的一些不太常见的情况下除外。）。我预计 img 不会跨越 100% 宽度，因为应用于其父级的类不会跨越整个宽度。您必须为这些类（以及这些限制宽度的任何父类）创建特定于打印的 css。

【讨论】：