pdfファイル]画面が表示されますにすべてのページを表示する反応

背景

需要を受けて、我々は、複数のPDFファイルと同時にスクロールする必要性を紹介するページを必要としています。

当初はPDFをレンダリングインラインフレームを使用するのではと思ったが、PDFファイルをレンダリングするのiframeの貧弱な制御を与え、その後、オンライン2つのPDFレンダリングライブラリを見つけるようになりました

反応-PDF-jsの公式ドキュメントを入力するにはクリック
 反応し、PDFを公式文書を入力してクリック

2つのライブラリを比較した後、ユーザーのより大きな反応し、PDFの量を発見した文書明確に、より包括的な機能を、そう反応し、PDFを使用しています。

インストール

注：応じてを使用して、NPMデフォルトで反応し、PDFファイルの最新バージョンをインストールするには、対応するプロジェクト反応し、PDF版の独自のバージョンを反応させるのバージョンは≥16.3を必要と反応して、対応するバージョンを見つける必要がある前に、ダウンロードに移動するには、にクリック反応し、PDFの公式ウェブサイトを表示します

インストールが反応し、PDFパッケージを

npm install react-pdf --save

コンポーネントの導入と使用

import React, { Component } from 'react';
import { Document, Page } from 'react-pdf';
import 'react-pdf/dist/Page/AnnotationLayer.css' // 加入这个css可以显示pdf中的批注以及连接

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

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

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

    return (
      <div>
        <Document
          file="一个PDF的连接.pdf"
          onLoadSuccess={this.onDocumentLoadSuccess}
        >
          <Page pageNumber={pageNumber} />
        </Document>
        <p>Page {pageNumber} of {numPages}</p>
      </div>
    );
  }
}

ディスプレイ

そしてちょうど動的な変更PAGENUMBERのように、ページを制御したいです

表示画面

ページの総数はonLoadSuccessに従って得ることができ、ページの総数に基づいて、ループページ生成コンポーネントは、すべてのページの画面を表示することができます

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

    return (
        <div>
            <Document file="一个PDF的连接.pdf"  onLoadSuccess={this.onDocumentLoadSuccess }>
                    {
                        new Array(numPages).fill('').map((item, index) => {
                            return <Page key={index} pageNumber={index} />
                        })
                    }
            </Document>
         </div>
    );
}

エピローグ

多くは、API、ヒント、pdfファイルのズーム比ドキュメントを参照することを忘れないように多くのニーズを満たすために必要があるのであれば、例えばとしてロードとロードの失敗を表示し、PDFの反応があります！