2

我正在尝试在我的反应应用程序中使用来自 pdfjs-dist (2.2.228) 的 pdf_viewer。我需要做的是呈现 pdf，然后以编程方式搜索术语，滚动到第一个匹配项，然后能够滚动到下一个和下一个，依此类推。这几乎是网络 pdf_viewer 的功能，但我需要在没有来自网络查看器的标题的情况下构建并将其集成到我的应用程序中。

我已经设法使渲染工作，并且能够按需在文本层中搜索术语。但是，与网络查看器不同，它不会滚动到第一次点击，我不知道如何让它滚动到更多点击。

这是我必须要做的：

import React, {Component} from 'react'
import { Button } from '@material-ui/core'
import * as pdfWorker from 'pdfjs-dist/build/pdf.worker'
import PdfJsLib from 'pdfjs-dist';
import 'pdfjs-dist/web/pdf_viewer.css';
import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';

class ViewPdf extends Component {

  constructor(props) {
    super(props);
    const searchParams = new URLSearchParams(location.search);
    const viewId = searchParams.get('id');
    this.state = {viewId:viewId};

    this.viewerContainer = React.createRef();
    this.viewer = React.createRef();

    this.pdfLinkService = new pdfjsViewer.PDFLinkService();

    this.pdfFindController = new pdfjsViewer.PDFFindController({
        linkService: this.pdfLinkService,
    });
}

  componentDidMount() {

    const fileUrl = "https://localhost:10101/<<my-pdf-file>>";

    let container = this.viewerContainer.current;
    let viewer = this.viewer.current;

    PdfJsLib.GlobalWorkerOptions.workerSrc = pdfWorker;
    PdfJsLib.getDocument(fileUrl).then((pdf) => {

        this.setState({numPages: pdf.numPages});

        this.pdfViewer = new pdfjsViewer.PDFViewer({
            container,
            viewer,
            linkService: this.pdfLinkService,
            findController: this.pdfFindController
        });

        this.pdfLinkService.setViewer(this.pdfViewer);

        this.pdfViewer.setDocument(pdf);
        this.pdfLinkService.setDocument(pdf, null);

        this.pdfLinkService.setViewer(this.pdfViewer);

    });
}

search=(terms) => {
    this.pdfFindController.executeCommand('find',{
        caseSensitive: false,
        highlightAll: true,
        scrollMatches: true,
        phraseSearch: true,
        findPrevious: true,
        query: terms
    });
};

render() {
    return (
        <div>
            <Button
                variant="contained"
                color="secondary"
                onClick={(e) =>this.search("obligations")}
            >
                Search
            </Button>
            <div id="viewerContainer" ref={this.viewerContainer}>
                <div id="viewer" ref={this.viewer} className="pdfViewer"/>
            </div>
        </div>
    );
  }
}
export default ViewPdf;

我已经尝试过 react-pdf 并且可以正常工作，但是其中的搜索功能不足以满足我的需要。这非常接近，但我真的可以使用一些关于如何让渲染输出以编程方式滚动的指针。

谢谢

4

0 回答 0