如何在react中使用pdf js express从pdf中删除高亮显示注释

npm install pdfjs-express react-pdf

import React from 'react';
import { Document, Page } from 'react-pdf';

class PDFViewer extends React.Component {
  state = {
    numPages: null,
    pageNumber: 1,
  };

  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  };

  render() {
    const { pageNumber, numPages } = this.state;

    return (
      <div>
        <Document
          file="path/to/your/pdf.pdf"
          onLoadSuccess={this.onDocumentLoadSuccess}
        >
          <Page pageNumber={pageNumber} />
        </Document>
        <p>
          Page {pageNumber} of {numPages}
        </p>
      </div>
    );
  }
}

export default PDFViewer;

import { ExpressUtils, Annotations } from 'pdfjs-express';

class PDFViewer extends React.Component {
  // ...

  async removeHighlight() {
    const { doc } = await ExpressUtils.loadDocument(
      'path/to/your/pdf.pdf'
    );

    const annotManager = doc.getAnnotationManager();
    const annotations = annotManager.getAnnotationsList();

    annotations.forEach(annotation => {
      if (annotation instanceof Annotations.TextHighlightAnnotation) {
        annotManager.deleteAnnotation(annotation);
      }
    });

    await ExpressUtils.saveDocument(doc, 'path/to/save/pdf.pdf');
  }

  render() {
    // ...
    return (
      <div>
        <button onClick={this.removeHighlight}>Remove Highlight</button>
        {/* ... */}
      </div>
    );
  }
}

import React from 'react';
import PDFViewer from './PDFViewer';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>PDF Viewer</h1>
        <PDFViewer />
      </div>
    );
  }
}

export default App;