用React进行PDF比较

用React比较PDF。

import React, { useEffect, useRef } from 'react';
import WebViewer from "@pdftron/webviewer";
import { Subject } from "rxjs";

function PDFComparison() {
  const viewerRef = useRef(null);
  const documentLoaded$ = new Subject();
  let wvInstance = null;

  useEffect(() => {
    const initWebViewer = async () => {
      const instance = await WebViewer({
        path: '../lib',
        fullAPI: true,
      }, viewerRef.current);

      wvInstance = instance;

      const { documentViewer, Annotations } = instance.Core;

      instance.UI.openElements(['notesPanel']);

      documentViewer.addEventListener('annotationsLoaded', () => {
        console.log('annotations loaded');
      });

      const { UI, Core } = instance;
      const { Color } = Annotations;

      UI.addEventListener(UI.Events.MULTI_VIEWER_READY, () => {
        const [documentViewer1, documentViewer2] = Core.getDocumentViewers();

        const startCompare = async () => {
          const shouldCompare = documentViewer1.getDocument() && documentViewer2.getDocument();

          if (shouldCompare) { // Check if both documents loaded before comparing
            const beforeColor = new Color(21, 205, 131, 0.4);
            const afterColor = new Color(255, 73, 73, 0.4);
            const options = { beforeColor, afterColor };
            await documentViewer1.startSemanticDiff(documentViewer2, options);
          }
        };

        documentViewer1.addEventListener('documentLoaded', startCompare);
        documentViewer2.addEventListener('documentLoaded', startCompare);
        documentViewer1.loadDocument('http://localhost:4200/files/fluffy.pdf');
        documentViewer2.loadDocument('http://localhost:4200/files/scooby.pdf');
      });

      UI.enableFeatures([UI.Feature.MultiViewerMode]);
    };

    initWebViewer();
  }, []);

  return (
    <div>
      <div ref={viewerRef}></div>
    </div>
  );
}

export default PDFComparison;

PDFComparison.ts比较PDF文件。

import React from 'react';
import PDFComparison from './PDFComparison'; // PDFComparisonコンポーネントのファイルパスに適切なものを指定

function App() {
  return (
    <div className="App">
      <PDFComparison />
    </div>
  );
}

export default App;

App.tsx的翻译：应用.tsx