Angular 5中使用PDF.js批量加载PDF页面显示异常求助

嘿，我来帮你搞定Angular 5里用PDF.js渲染PDF时页面并排的问题！这种第一页正常、后面页面挤在一起的情况，大多和容器的CSS布局或者Angular里DOM操作的方式有关，给你几个具体的排查方向和修复方案：

1. 先检查承载页面的容器样式 #

首先要确保每个PDF页面的容器是块级元素，强制换行。如果你的页面容器是inline或inline-block类型，就会导致页面并排显示。给每个页面的容器加这些CSS规则：

/* 每个PDF页面的外层容器 */
.pdf-page-wrapper {
  display: block;
  margin: 1.5rem auto; /* 可选，给页面之间加间距 */
  width: fit-content; /* 让容器自适应页面宽度 */
}

/* PDF渲染用的canvas */
.pdf-page-wrapper canvas {
  max-width: 100%; /* 防止页面超出父容器宽度 */
  height: auto !important; /* 保持PDF页面的原始比例 */
}

2. 修正Angular里的DOM操作方式 #

Angular 5不推荐直接用document.getElementById来获取DOM元素，容易出现组件未初始化完成就操作DOM的问题，改用@ViewChild来获取容器会更稳妥。调整你的代码如下：

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import * as PDFJS from 'pdfjs-dist';

@Component({
  selector: 'app-pdf-viewer',
  template: `<div #pdfViewerContainer class="pdf-container"></div>`
})
export class PdfViewerComponent implements OnInit {
  @ViewChild('pdfViewerContainer') pdfContainer: ElementRef;
  private pdfDoc: any;
  totalPages: number;

  ngOnInit() {
    const pdfSrc = '你的PDF文件路径';
    PDFJS.getDocument(pdfSrc).then((doc) => {
      this.pdfDoc = doc;
      this.totalPages = this.pdfDoc.pdfInfo.numPages;
      this.renderAllPages();
    });
  }

  private renderAllPages() {
    // 循环渲染每一页
    for (let pageNum = 1; pageNum <= this.totalPages; pageNum++) {
      this.pdfDoc.getPage(pageNum).then((page) => {
        const scale = 1.2; // 调整渲染比例，按需修改
        const viewport = page.getViewport({ scale });
        
        // 创建canvas元素
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        // 创建每个页面的外层容器，应用我们写的样式
        const pageWrapper = document.createElement('div');
        pageWrapper.classList.add('pdf-page-wrapper');
        pageWrapper.appendChild(canvas);

        // 将页面容器添加到父容器中
        this.pdfContainer.nativeElement.appendChild(pageWrapper);

        // 渲染页面到canvas
        const renderCtx = {
          canvasContext: ctx,
          viewport: viewport
        };
        page.render(renderCtx);
      });
    }
  }
}

3. 排查viewport和异步渲染的问题 #

• 确保每一页的viewport都是单独计算的，不要复用同一个viewport对象，否则不同页面的尺寸可能会冲突；
• 如果页面渲染顺序混乱（虽然不会直接导致并排，但可能影响布局），可以用async/await来保证渲染顺序：

private async renderAllPages() {
  for (let pageNum = 1; pageNum <= this.totalPages; pageNum++) {
    const page = await this.pdfDoc.getPage(pageNum);
    // 后续的canvas创建、渲染逻辑和上面一致
  }
}

4. 检查是否有全局样式干扰 #

看看你的全局CSS里有没有给div或canvas设置了float: left、display: inline-block之类的规则，这些会强制元素并排，把这些规则去掉或者给PDF页面容器单独覆盖样式。

按照上面的步骤排查，应该就能解决页面并排的问题啦！

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