Angular 4+Bootstrap 4下PDF Viewer不响应，如何实现响应式？

嘿，我之前也遇到过类似的困扰！结合Bootstrap 4的响应式系统和Angular PDF组件的配置，咱们可以一步步搞定这个问题：

1. 优化容器结构（利用Bootstrap 4栅格） #

首先调整你的HTML结构，用Bootstrap 4的默认栅格类（col-12替代旧的col-xs-12，因为Bootstrap 4中xs是默认断点），同时给每个PDF容器添加自定义类来控制样式和间距：

<div class="row">
  <div class="col-12">
    <div *ngFor="let Pdfdata of pdf;" class="pdf-container mb-4">
      <pdf-viewer 
        [src]="Pdfdata.PDFPath"
        [fitToPage]="true"
        style="display: block;"
      ></pdf-viewer>
    </div>
  </div>
</div>

2. 添加自定义CSS确保自适应 #

在组件的样式文件（.component.css）里添加以下样式，保证PDF容器占满可用宽度，同时处理小屏幕下的横向滚动：

.pdf-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto; /* 小屏幕下允许横向滚动查看完整PDF */
  padding: 0.5rem;
}

pdf-viewer {
  display: block;
  width: 100%;
}

3. 动态调整PDF缩放比例（适配不同屏幕） #

为了让PDF在移动端显示更友好，我们可以监听窗口大小变化，动态调整PDF的缩放比例。在组件类中添加以下逻辑：

import { Component, OnInit, HostListener } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  pdf: any[]; // 你的PDF数据数组
  pdfZoom = 1; // 默认缩放比例

  ngOnInit() {
    // 初始化时调整一次缩放
    this.adjustPdfZoom();
  }

  // 监听窗口 resize 事件
  @HostListener('window:resize', ['$event'])
  onWindowResize(event: Event) {
    this.adjustPdfZoom();
  }

  // 根据屏幕宽度调整缩放比例
  private adjustPdfZoom() {
    const screenWidth = window.innerWidth;
    if (screenWidth < 576) { // Bootstrap 4 xs 断点（移动端）
      this.pdfZoom = 0.7;
    } else if (screenWidth < 768) { // Bootstrap 4 sm 断点（平板竖屏）
      this.pdfZoom = 0.85;
    } else { // 桌面端
      this.pdfZoom = 1;
    }
  }
}

然后把缩放比例绑定到pdf-viewer组件上：

<pdf-viewer 
  [src]="Pdfdata.PDFPath"
  [zoom]="pdfZoom"
  [fitToPage]="true"
  style="display: block;"
></pdf-viewer>

4. 额外提示 #

• 如果你的pdf-viewer是ngx-extended-pdf-viewer，可以直接启用它的响应式属性：[responsive]="true"，这样组件会自动适配屏幕大小，无需手动调整缩放。
• 确保你的PDF组件版本是最新的，旧版本可能存在响应式相关的bug。

这样调整后，你的PDF查看器应该就能在移动端、平板端和桌面端都实现自适应布局了！

内容的提问来源于stack exchange，提问作者Balamurugan