【React】「React-PDF」ライブラリを使ってWebページにPDFを表示する

今回は、React プロジェクトで PDF を表示する方法についてです。
調べると、<iframe> を使ってページに埋め込む方法が出てくるのですが、こちらの方法だとダウンロードボタンや印刷ボタン等がついた操作ヘッダーが表示されてしまいます。
このヘッダーが表示されていた方が良い場合もありますが、今回は表示されてほしくなかったので、ライブラリを使って実装しました。

使用したライブラリは「React-PDF」です。
GitHub のページはこちらから。

GitHub – wojtekmaj/react-pdf: Display PDFs in your React app as easily as if they were images.
https://github.com/wojtekmaj/react-pdf

こちらのライブラリを使うと、PDF をまるで画像のように扱うことができます！

まず、下記コマンドでライブラリをインストールします。

npm install react-pdf --save

上記が完了したら、あとはプロジェクトの任意の場所に実装していきます。

サンプルコードは下記のとおりです。

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

class Example extends React.Component {
  render() {
  return (
      <div>
        <Document file="[表示したいPDFのパス]">
          <Page pageNumber={1} />
        </Document>
      </div>
    );
  }
}
export default Example;

上記のように記述すると、表示したい PDF ファイルの1ページ目を表示してくれます。
なお、表示するページは .map() などを使えば複数指定できるかと思いますので、こちらは適宜修正してください。

こちらを実行すると、<img> タグで表示した画像ファイルのような感覚で、PDF ドキュメントが表示されました。
なお、今回は実装しませんでしたが、PDF ファイルの読み込みに成功した時に実行される .onLoadSuccess() や .onPassword() というパスワードで保護された PDF が読み込まれた時に呼び出される関数なども用意されています。
特にページ数が多い PDF ファイルなど、読み込みに時間がかかるファイルを読み込むときなどには、.onLoadSuccess()を使ってローディングアイコンを操作する処理を追加した方が良さそうですね。

以上、「React-PDF」ライブラリを使って PDF を表示する方法についてでした。
ご参考になれば幸いです。