Angular iframe embed pdf adjust img width_angular iframe嵌入pdf-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49655243/article/details/121085927

本文探讨了在移动Safari上使用Angular显示PDF时遇到的问题，由于iOS 8以后，Safari会将PDF作为图片渲染在iframe中。解决方案是在PDF加载后调整iframe内图片的宽度。同时提供了在Angular 6中获取iframe内img元素的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Problems displaying PDF in iFrame on Mobile Safari
https://stackoverflow.com/questions/15480804/problems-displaying-pdf-in-iframe-on-mobile-safari

As of iOS 8, mobile Safari renders the PDF as an image within an HTML document inside the frame. You can then adjust the width after the PDF loads:

<iframe id="theFrame" src="some.pdf" style="height:1000px; width:100%;"></iframe>
<script>
document.getElementById("theFrame").contentWindow.onload = function() {
    this.document.getElementsByTagName("img")[0].style.width="100%";
};
</script>

Get IFrame img in angular 6
https://stackoverflow.com/questions/53605978/get-iframe-img-in-angular-6

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  @ViewChild('iframe') iframe: ElementRef;

  ngAfterViewInit() {
    const nativeEl =  this.iframe.nativeElement;
    if ( (nativeEl.contentDocument || nativeEl.contentWindow.document).readyState === 'complete' )        {
        nativeEl.onload = this.onIframeLoad.bind(this);
    } else {
      if (nativeEl.addEventListener) {
        nativeEl.addEventListener('load', this.onIframeLoad.bind(this), true);
      } else if (nativeEl.attachEvent) {
        nativeEl.attachEvent('onload', this.onIframeLoad.bind(this));
      }
    }
  }


  onIframeLoad() {
    const base64String = this.iframe.nativeElement.contentWindow.document.body.innerHTML;
    console.log(this.iframe.nativeElement.contentWindow.document.body.children[1].currentSrc);
  }
}

Note: iframe url

 constructor(public sanitizer: DomSanitizer) {}
  ngOnInit() {
    this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }