pdfjs-dist + react 使用记录

前言

本片文章仅为笔记，不做具体讲解。
文档地址：https://github.com/mozilla/pdf.js
参考例子： pdf.js/examples/mobile-viewer/

效果

JS

import * as React from 'react';
import * as PDFJS from 'pdfjs-dist'
import * as PDFViewer from 'pdfjs-dist/web/pdf_viewer';


export default class PDF extends React.Component<any, any>{
  pageRenderRef: React.RefObject<any>;
  errorWrapper: React.RefObject<any>;
  pageRenders: []
  pdfViewer: any  // 不知道pdfjs导出的数据是什么类型，统一使用any
  eventBus: any
  pdfLinkService: any
  l10n: any
  pdfHistory: any
  pdfLoadingTask: any
  pdfDocument: any
  // loadingBar: any

  constructor(props: any) {
    super(props)
    this.pageRenders = [];   // 存放每页pdf形成的canvas
    this.pageRenderRef = React.createRef();  // 渲染pdf的容器
    this.errorWrapper = React.createRef();
    this.pdfViewer = null
    this.eventBus = null
    this.pdfLinkService = null
    this.l10n = null
    this.pdfHistory = null
    this.pdfLoadingTask = null
    this.pdfDocument = null

    this.state = {
      USE_ONLY_CSS_ZOOM: true,
      TEXT_LAYER_MODE: 0, // DISABLE
      MAX_IMAGE_SIZE: 1024 * 1024,
      CMAP_URL: "https://unpkg.com/pdfjs-dist@2.2.228/cmaps/", // 引入pdf.js的字体
      CMAP_PACKED: true,
      // DEFAULT_URL: "./compressed.tracemonkey-pldi-09.pdf",
      DEFAULT_URL: 'http://localhost:8082/pdfLocal/compressed.tracemonkey-pldi-09.pdf',  // 本地预览 需要代理
      DEFAULT_SCALE_DELTA: 1.1,
      MIN_SCALE: 0.25,
      MAX_SCALE: 10.0,
      DEFAULT_SCALE_VALUE: "auto",
      pdfLoadingTask: null,
      toPageNumber: '1',
      preDisabled: false,
      nextDisabled: false,
      errorWrapperHide: true,
      errorMoreInfoHide: true,
      title: '',
      url: '',
      errorMessage: '',
      errorMoreInfo: ''
    }

  }

  componentDidMount() {
    this.init()
    this.animationStartedPromise().then(res => {
      this.open({
        url: this.state.DEFAULT_URL
      })
    })
  }

  animationStartedPromise = () => {
    return new Promise((resolve) => {
      window.requestAnimationFrame(resolve);
    });
  }

  getloadingBar = () => {
    let bar = new PDFViewer.ProgressBar("#loadingBar", {});
    return PDFJS.shadow(this, "loadingBar", bar);
  }

  /**
   * 渲染pdf
   */
  open = (params: any) => {
    if (this.pdfLoadingTask) {
      // We need to destroy already opened document
      return this.close().then(
        () => {
          // ... and repeat the open() call.
          return this.open(params);
        }
      );
    }

    let url: string = params.url;
    let self = this;
    this.setTitleUsingUrl(url);
    // Loading document.
    const loadingTask = PDFJS.getDocument({
      url: url,
      maxImageSize: this.state.MAX_IMAGE_SIZE,
      cMapUrl: this.state.CMAP_URL,
      cMapPacked: this.state.CMAP_PACKED,
    });

    this.pdfLoadingTask = loadingTask;

    // 进度条
    loadingTask.onProgress = (progressData: any) => {
      self.progress(progressData.loaded / progressData.total);
    };

    return loadingTask.promise.then(
      (pdfDocument: any) => {
        console.log('pdfDocument', pdfDocument)
        // Document loaded, specifying document for the viewer.
        self.pdfDocument = pdfDocument;
        self.pdfViewer.setDocument(pdfDocument);
        self.pdfLinkService.setDocument(pdfDocument);
        self.pdfHistory.initialize({ fingerprint: pdfDocument.fingerprint });

        self.getloadingBar().hide();
        // self.setTitleUsingMetadata(pdfDocument);
      },
      (exception: any) => {
        console.log('exception', exception)
        let message = exception && exception.message;
        let l10n = self.l10n;
        let loadingErrorMessage;

        if (exception instanceof PDFJS.InvalidPDFException) {
          // change error message also for other builds
          loadingErrorMessage = l10n.get(
            "invalid_file_error",
            null,
            "Invalid or corrupted PDF file."
          );
        } else if (exception instanceof PDFJS.MissingPDFException) {
          // special message for missing PDFs
          loadingErrorMessage = l10n.get(
            "missing_file_error",
            null,
            "Missing PDF file."
          );
        } else if (exception instanceof PDFJS.UnexpectedResponseException) {
          loadingErrorMessage = l10n.get(
            "unexpected_response_error",
            null,
            "Unexpected server response."
          );
        } else {
          loadingErrorMessage = l10n.get(
            "loading_error",
            null,
            "An error occurred while loading the PDF."
          );
        }

        loadingErrorMessage.then((msg: any) => {
          self.error(msg, { message: message });
        });
        self.getloadingBar().hide();
      }
    );
  }

  close = () => {
    this.setState({
      errorWrapperHide: true
    })

    if (!this.pdfLoadingTask) {
      return Promise.resolve();
    }

    let promise = this.pdfLoadingTask.destroy();
    this.pdfLoadingTask = null;

    if (this.pdfDocument) {
      this.pdfDocument = null;

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

      if (this.pdfHistory) {
        this.pdfHistory.reset();
      }
    }

    return promise;
  }

  progress = (level: any) => {
    let percent = Math.round(level * 100);
    // Updating the bar if value increases.
    if (percent > this.getloadingBar().percent || isNaN(percent)) {
      this.getloadingBar().percent = percent;
    }
  }

  error = (message: any, moreInfo: any) => {
    let l10n = this.l10n;
    let moreInfoText = [
      l10n.get(
        "error_version_info",
        { version: PDFJS.version || "?", build: PDFJS.build || "?" },
        "PDF.js v{{version}} (build: {{build}})"
      ),
    ];

    if (moreInfo) {
      moreInfoText.push(
        l10n.get(
          "error_message",
          { message: moreInfo.message },
          "Message: {{message}}"
        )
      );
      if (moreInfo.stack) {
        moreInfoText.push(
          l10n.get("error_stack", { stack: moreInfo.stack }, "Stack: {{stack}}")
        );
      } else {
        if (moreInfo.filename) {
          moreInfoText.push(
            l10n.get(
              "error_file",
              { file: moreInfo.filename },
              "File: {{file}}"
            )
          );
        }
        if (moreInfo.lineNumber) {
          moreInfoText.push(
            l10n.get(
              "error_line",
              { line: moreInfo.lineNumber },
              "Line: {{line}}"
            )
          );
        }
      }
    }

    this.setState({
      errorWrapperHide: false,
      errorMessage: message
    })

    Promise.all(moreInfoText).then((parts) => {
      this.setState({
        errorMoreInfo: parts.join("\n")
      })
    });
  }

  errorClose = () => {
    this.setState({
      errorWrapperHide: true,
    })
  }

  errorShowMore = () => {

    this.setState({
      errorMoreInfoHide: false,
    })

  }

  errorShowLess = () => {
    this.setState({
      errorMoreInfoHide: true,
    })

  }

  /**
   * 获取pdf名称
   * @param url 
   */
  setTitleUsingUrl = (url: string) => {
    this.setState({
      url: url
    })
    let title = PDFJS.getFilenameFromUrl(url) || url;
    try {
      title = decodeURIComponent(title);
    } catch (e) {
      // decodeURIComponent may throw URIError,
      // fall back to using the unprocessed url in that case
    }
    this.setTitle(title);
  }

  /**
   * 设置title
   * @param title pdf名字
   */
  setTitle = (title: string) => {
    document.title = title;
    this.setState({
      title: title
    })
    // 传给父级
    this.props.getTitle(title)
  }

  init = () => {
    console.log('PDF init')
    PDFJS.GlobalWorkerOptions.workerSrc = import('pdfjs-dist/build/pdf.worker')

    // 跳页初始化
    const eventBus = new PDFViewer.EventBus();
    this.eventBus = eventBus;

    let linkService = new PDFViewer.PDFLinkService({
      eventBus: eventBus,
    });
    this.pdfLinkService = linkService;

    let pdfViewer = new PDFViewer.PDFViewer({
      container: this.pageRenderRef?.current,
      eventBus: eventBus,
      linkService: linkService,
      l10n: this.state.l10n,
      useOnlyCssZoom: this.state.USE_ONLY_CSS_ZOOM,
      textLayerMode: this.state.TEXT_LAYER_MODE,
    });
    this.pdfViewer = pdfViewer;


    linkService.setViewer(pdfViewer);

    this.l10n = PDFViewer.NullL10n;

    this.pdfHistory = new PDFViewer.PDFHistory({
      eventBus: eventBus,
      linkService: linkService,
    })

    linkService.setHistory(this.pdfHistory);

    eventBus.on("pagesinit", () => {
      // We can use pdfViewer now, e.g. let's change default scale.
      pdfViewer.currentScaleValue = this.state.DEFAULT_SCALE_VALUE;
    });

    eventBus.on(
      "pagechanging",
      (evt: any) => {
        let page: number = evt.pageNumber; // 当前页数
        let numPages: number = this.pdfDocument.numPages;  // 总页数
        this.setState({
          toPageNumber: page,
          preDisabled: page <= 1,
          nextDisabled: page >= numPages
        })
        // 返回给父级
        this.props.getPageNumber(page, numPages)
      },
      true
    );

  }

  /** 
  * 前一页
  */
  previous = () => {
    if (this.state.preDisabled) return;
    this.pdfViewer.currentPageNumber--;
    console.log(this.pdfViewer)
  }

  /** 
  * 后一页
  */
  next = () => {
    if (this.state.nextDisabled) return;
    this.pdfViewer.currentPageNumber++;
    console.log(this.pdfViewer)
  }

  /**
   * 缩小
   */
  zoomOut = (ticks: any) => {
    let newScale = this.pdfViewer.currentScale;
    do {
      newScale = (newScale / this.state.DEFAULT_SCALE_DELTA).toFixed(2);
      newScale = Math.floor(newScale * 10) / 10;
      newScale = Math.max(this.state.MIN_SCALE, newScale);
    } while (--ticks && newScale > this.state.MIN_SCALE);
    this.pdfViewer.currentScaleValue = newScale;
  }

  /**
    * 放大
    */
  zoomIn = (ticks: any) => {
    let newScale = this.pdfViewer.currentScale;
    do {
      newScale = (newScale * this.state.DEFAULT_SCALE_DELTA).toFixed(2);
      newScale = Math.ceil(newScale * 10) / 10;
      newScale = Math.min(this.state.MAX_SCALE, newScale);
    } while (--ticks && newScale < this.state.MAX_SCALE);
    this.pdfViewer.currentScaleValue = newScale;
    console.log(this.pdfViewer.currentScaleValue)
  }

  /**
   * 跳转页数
   */
  toPage = (page: string | number) => {
    this.setState({
      toPageNumber: page
    })
    if (page) {
      this.pdfViewer.currentPageNumber = Number(page)
    }
  }

  render() {
    return (
      <React.Fragment>

        <div id="viewerContainer" ref={this.pageRenderRef}>
          <div id="viewer" className="pdfViewer"></div>
        </div>

        <div id="loadingBar">
          <div className="progress"></div>
          <div className="glimmer"></div>
        </div>

        <div id="errorWrapper" ref={this.errorWrapper} hidden={this.state.errorWrapperHide}>
          <div id="errorMessageLeft">
            <span id="errorMessage">{this.state.errorMessage}</span>
            <button id="errorShowMore" onClick={this.errorShowMore}>More Information</button>
            <button id="errorShowLess" onClick={this.errorShowLess}>Less Information</button>
          </div>
          <div id="errorMessageRight">
            <button id="errorClose" onClick={this.errorClose}>Close</button>
          </div>
          <div className="clearBoth"></div>
          <textarea id="errorMoreInfo" disabled hidden={this.state.errorMoreInfoHide} value={this.state.errorMoreInfo}></textarea>
        </div>

        <footer>
          <button className="toolbarButton pageUp" title="Previous Page" id="previous" onClick={this.previous}></button>
          <button className="toolbarButton pageDown" title="Next Page" id="next" onClick={this.next}></button>
          <input type='text' id="pageNumber" className="toolbarField pageNumber" value={this.state.toPageNumber} onChange={e => this.toPage(e?.target?.value)} size={4} min="1" />
          <button className="toolbarButton zoomOut" title="Zoom Out" id="zoomOut" onClick={this.zoomOut}></button>
          <button className="toolbarButton zoomIn" title="Zoom In" id="zoomIn" onClick={this.zoomIn}></button>
        </footer>
      </React.Fragment>
    )
  }
}

CSS

body {
  background: url(../images/document_bg.png);
  color: rgba(255, 255, 255, 1);
  font-family: sans-serif;
  font-size: 10px;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding-bottom: 5rem;
}

section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 2rem;
}

footer {
  background-image: url(../images/toolbar_background.png);
  height: 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  box-shadow: 0 -0.2rem 0.5rem rgba(50, 50, 50, 0.75);
}

.toolbarButton {
  display: block;
  padding: 0;
  margin: 0;
  border-width: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0);
}

.toolbarButton.pageUp {
  position: absolute;
  width: 18%;
  height: 100%;
  left: 0;
  background-image: url(../images/icon_previous_page.png);
  background-size: .4rem;
}

.toolbarButton.pageDown {
  position: absolute;
  width: 18%;
  height: 100%;
  left: 18%;
  background-image: url(../images/icon_next_page.png);
  background-size: .4rem;
}

#pageNumber {
  -moz-appearance: textfield; /* hides the spinner in moz */
  position: absolute;
  width: 28%;
  height: 100%;
  left: 36%;
  text-align: center;
  border: 0;
  background-color: rgba(0, 0, 0, 0);
  font-size: .4rem;
  color: rgba(255, 255, 255, 1);
  background-image: url(../images/div_line_left.png),
    url(../images/div_line_right.png);
  background-repeat: no-repeat;
  background-position: left, right;
  background-size: 0.2rem, 0.2rem;
}

.toolbarButton.zoomOut {
  position: absolute;
  width: 18%;
  height: 100%;
  left: 64%;
  background-image: url(../images/icon_zoom_out.png);
  background-size: .5rem;
}

.toolbarButton.zoomIn {
  position: absolute;
  width: 18%;
  height: 100%;
  left: 82%;
  background-image: url(../images/icon_zoom_in.png);
  background-size: .5rem;
}

.toolbarButton[disabled] {
  opacity: 0.3;
}

.hidden {
  display: none;
}
[hidden] {
  display: none !important;
}

#viewerContainer {
  position: absolute;
  overflow: auto;
  width: 100%;
  // height: 100%;
  top: 1rem;
  bottom: 0;
  left: 0;
  right: 0;
}

canvas {
  margin: auto;
  display: block;
}


#loadingBar {
  position: relative;
  height: 0.6rem;
  background-color: rgba(51, 51, 51, 1);
  border-bottom: 1px solid rgba(51, 51, 51, 1);
  margin-top: 5rem;
}

#loadingBar .progress {
  position: absolute;
  left: 0;
  width: 0;
  height: 100%;
  background-color: rgba(221, 221, 221, 1);
  overflow: hidden;
  transition: width 200ms;
}

@keyframes progressIndeterminate {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

#loadingBar .progress.indeterminate {
  background-color: rgba(153, 153, 153, 1);
  transition: none;
}

#loadingBar .indeterminate .glimmer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 5rem;
  background-image: linear-gradient(
    to right,
    rgba(153, 153, 153, 1) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(153, 153, 153, 1) 100%
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: progressIndeterminate 2s linear infinite;
}

#errorWrapper {
  background: none repeat scroll 0 0 rgba(255, 85, 85, 1);
  color: rgba(255, 255, 255, 1);
  left: 0;
  position: absolute;
  right: 0;
  top: 3.2rem;
  z-index: 1000;
  padding: 0.3rem;
  font-size: 0.8em;
}

#errorMessageLeft {
  float: left;
}

#errorMessageRight {
  float: right;
}

#errorMoreInfo {
  background-color: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 1);
  padding: 0.3rem;
  margin: 0.3rem;
  width: 98%;
}

.pdf-wrap{
  .page-title{
    color: #555;
  }
}