Как отобразить 20% PDF с помощью специального средства просмотра PDF, созданного с помощью PDF. js

Question

Это код, который отвечает за получение PDF. Затем он передает PDF в программу просмотра PDF для визуализации. Я не хочу рендерить весь PDF. Вместо этого я хочу визуализировать только часть pdf, например, первые 5 страниц или 20% страницы. Код ниже использует pdf js, и этот код ниже доступен в репозитории PDF JS. Вы можете получить доступ ко всему коду через https://github.com/mozilla/pdf.js/blob/master/examples/mobile-viewer/viewer.js

private open (params) {
    let url = params.url
    let self = this
    this.setTitleUsingUrl(url)
    // Loading document.
    let loadingTask = pdfjsLib.getDocument({
      url: url,
      withCredentials: true,
      maxImageSize: MAX_IMAGE_SIZE,
      cMapPacked: CMAP_PACKED
    })
    this.pdfLoadingTask = loadingTask

    loadingTask.onProgress = function (progressData) {
      self.progress(progressData.loaded / progressData.total)
    }

    return loadingTask.promise.then(function (pdfDocument) {
      // Document loaded, specifying document for the viewer.
      console.log(pdfDocument); // The pdf object. picture content below

      // The document is being passed to the viewer for rendering
      // I want to pass just 15% of the document to the user to view
      self.pdfDocument = pdfDocument;
      self.pdfViewer.setDocument(pdfDocument)
      self.pdfLinkService.setDocument(pdfDocument)
      self.pdfHistory.initialize(pdfDocument.fingerprint)
      self.loadingBar.hide()
      self.setTitleUsingMetadata(pdfDocument)
    }

Изображение ниже представляет структуру pdf-объекта

Answer 1

Я могу предложить пакет реагировать-pdf . Это обертка из PDF. js. Документ имеет реквизит onLoadSuccess как функцию с объектом в качестве аргумента. Как я знаю в этом объекте вы можете найти numPages - общее количество страниц. Вы можете манипулировать этим числом, например Math.floor (0.2 * numPages), и отображать только это количество страниц. Однако, прочитав документацию MB, вы можете найти лучшее решение.

ОБНОВЛЕНИЕ:

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

class MyApp extends Component {
  state = {
    numPages: null,
  }

  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages: Math.floor(0.2 * numPages) });
  }

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

    return (
      <div>
        <Document
          file="somefile.pdf"
          onLoadSuccess={this.onDocumentLoadSuccess}
        >
          {Array.from({length: numPages}, (v, i) => i).map(i => (
            <Page key={i} pageIndex={i} />
          ))}
        </Document>
      </div>
    );
  }
}