Question

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

在该组件中，有一个打印跨度，单击它可以使用window.print（）。

在Mac和Windows上，它会全幅打印图像，但在iPhone上，图像在大白内（左侧）很小。

我更喜欢修复我的代码，但是如果有其他浏览器不遵循iPhone上的野生动物园限制并进行修复，那么它对我来说也是一个足够好的解决方案。（相同的问题）。

有什么建议吗？

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

编辑：3：我编辑了指令，现在它也可以在Mac上使用开发工具作为响应性iPhone Safari很好地在Mac上打印，但是在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打印时将全角显示。

Answer 1

测试特定于打印样式的一种好方法是删除print媒体查询，直到将其设置为浏览器中的样式为止，并仅在完成后将其应用于打印媒体查询下。

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

如何修复用于iPhone打印的CSS

1 个答案: