Mozilla PDF.js 在Angular应用中出现文本重叠问题求助

• 排查全局CSS污染
  Angular全局样式常给通用标签（div/span）设置line-height、letter-spacing或transform属性，直接干扰PDF文本层布局。给PDF容器加隔离类，重置内部样式：

  .pdf-viewer-container * {
    line-height: normal !important;
    letter-spacing: normal !important;
    transform: none !important;
    position: static !important;
  }
  

• 调整字体渲染策略
  PDF.js默认用CSS字体渲染，Angular打包或跨域可能导致字体加载失败，触发文本重叠。尝试禁用CSS字体渲染，强制用Canvas渲染：

  import * as pdfjsLib from 'pdfjs-dist';
  import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
  
  pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
  pdfjsLib.disableFontFace = true;
  

• 关闭Angular视图封装
  Angular默认视图封装会给DOM元素注入私有样式，可能破坏PDF文本层结构。将PDF组件的视图封装改为None：

  import { Component, ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'app-pdf-viewer',
    templateUrl: './pdf-viewer.component.html',
    styleUrls: ['./pdf-viewer.component.css'],
    encapsulation: ViewEncapsulation.None
  })
  export class PdfViewerComponent {}
  

• 对齐PDF初始化参数
  对比Vue项目的PDF.js配置，确保scale、textLayerMode等关键参数完全一致，尤其是文本层启用状态：

  const loadingTask = pdfjsLib.getDocument({
    url: 'your-pdf-path',
    textLayerMode: 1, // 保持与Vue项目相同的文本层模式
  });
  

Vue应用正常渲染效果：

Angular应用异常渲染效果：

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