angular11使用pdf.js如何根据一段话拿到他在文中的位置

在Angular 11中，要使用PDF.js库根据文本内容获取其在PDF文档中的位置，首先需要安装`@mozilla/pdf.js`模块，它是一个JavaScript库用于处理PDF文件。以下是大致步骤：

1. **安装依赖**:
使用npm或yarn添加pdf.js到项目中：

   npm install @mozilla/pdf.js --save
   # 或者
   yarn add @mozilla/pdf.js

2. **加载PDF文件**:
在Angular组件中，你可以创建一个服务来加载和预处理PDF，例如使用`FileReader` API读取本地文件或从服务器下载。

import { Injectable } from '@angular/core';
import * as pdfjsLib from '@mozilla/pdf.js';

@Injectable({
  providedIn: 'root'
})
export class PdfService {
  loadPdf(file: File) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => {
        pdfjsLib.getDocument(reader.result).promise.then(pdf => {
          resolve(pdf);
        });
      };
      reader.readAsArrayBuffer(file);
    });
  }
}

3. **解析并搜索文本**:
当PDF加载完成后，遍历页面，找到包含特定文本的位置。这里需要使用`TextLayerBuilder`和`PDFPage`提供的API。

export async function findTextPosition(pdf: PDFDocumentProxy, searchText: string): Promise<{pageNumber: number, position: {top, left}>[] | null> {
  const textLayerBuilder = new pdfjsLib.TextLayerBuilder({ pageRotation: pdf.getPage(0).getRotate() });

  // 这里假设你已经有了页码范围或其他条件筛选
  for (let i = 1; i <= pdf.numPages; i++) {
    await pdf.getPage(i).then(page => {
      const layer = textLayerBuilder.build(page);

      // 使用正则表达式匹配文本，并记录位置信息
      const positions: {pageNumber: number, position: {top, left}}[] = [];
      layer.getTextContent().then(textContent => {
        textContent.items.forEach(item => {
          if (textContent.str.includes(searchText)) {
            positions.push({
              pageNumber: i,
              position: {top: item.y, left: item.x},
            });
          }
        });
      });
    });
  }

  return positions.length > 0 ? positions : null;
}

4. **在组件中使用**:
在你的Angular组件中注入`PdfService`，调用`findTextPosition`方法并处理返回结果。

import { Component, OnInit } from '@angular/core';
import { PdfService } from './pdf.service';

@Component({
  selector: 'app-pdf-viewer',
  templateUrl: './pdf-viewer.component.html',
  styleUrls: ['./pdf-viewer.component.css']
})
export class PdfViewerComponent implements OnInit {
  positions: any[];

  constructor(private pdfService: PdfService) {}

  ngOnInit(): void {
    // 加载PDF文件并查找文本位置
    this.pdfService.loadPdf(yourPdfFile).then(pdf => {
      const searchText = '你的搜索关键字';
      this.positions = findTextPosition(pdf, searchText);
    });
  }
}