LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ComPDFKit

React PDF を使用して React.js PDF ビューアーを構築する方法

Posted at

この記事では、 React.jsで PDF ビューアーを作成するための最も人気の高いオープンソースライブラリに焦点を当てます。具体的には、有名なオープンソースライブラリであるreact-pdfの機能を活用して、React.js PDF ビューアーを作成するプロセスを解説します。

このウォークスルーでは、前半でReact-PDFを用いてReact.jsアプリケーションにフル機能のPDFビューアを実装する方法を学びます。後半では、ComPDFを統合して追加のPDF機能を提供し、ユーザーのドキュメント処理エクスペリエンスをさらに向上させることに焦点を当てます。

オープンソースのReact.js PDFビューアライブラリ

React.js開発では、様々なオープンソースライブラリ、特にreact-pdfと@react-pdf/rendererが非常に人気があり、PDFの閲覧を容易にしています。@react-pdf/rendererはnpmでの週間ダウンロード数が54Kに達し、React-PDFはnpmでの週間ダウンロード数が100万に達しています。このブログ記事では、React-PDFを使った無料のPDFビューアの構築に焦点を当てます。

オープンソースの react.js pdf ビューアライブラリ

React-PDF で React.js PDF ビューアを構築する

要件：

  • Node.js バージョン 14 以降。

-パッケージマネージャーはnpmと互換性があります。このガイドには、Yarnとnpm クライアント（Node.jsにデフォルトでインストールされます）の使用例が含まれています。npmのバージョンが5.6以上であることを確認してください。

プロジェクトを作成する

  1. まず、create-react-app を使用して React.js プロジェクトを作成します。

    npx create-react-app react-pdf-example

  2. プロジェクトが作成されたら、ディレクトリをプロジェクト フォルダーに変更します。

    cd react-pdf-example

react-pdf を追加

  1. React PDF ライブラリをインストールして追加します。Reactアプリの場所にあるターミナルから次のコマンドを実行して、必要なすべてのコンポーネントをダウンロードします。

    npm i react-pdf

  2. 次に、以下のコードに従って、「src/components/Webviewer.js」にWebビューアーを作成します。

import { useState } from "react"
import { Document, Page, pdfjs } from "react-pdf"
import "react-pdf/dist/esm/Page/AnnotationLayer.css"
import 'react-pdf/dist/Page/TextLayer.css';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

export default function PDFViewer(props) {
  const [numPages, setNumPages] = useState();
  const [pageNumber, setPageNumber] = useState(1);

  function prevPage() {
    setPageNumber(pageNumber - 1 <= 1 ? 1 : pageNumber - 1);
  }

  function nextPage() {
    setPageNumber(pageNumber + 1 >= numPages ? numPages : pageNumber + 1);
  }

  function onLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <nav>
        <button onClick={prevPage}>Previous Page</button>
        <button onClick={nextPage}>Next Page</button>
      </nav>
      <div className="pages">{pageNumber} of {numPages}</div>
      <div className="page">
        <Document
          file='ComPDFKit_Sample_File_Web.pdf'
          onLoadSuccess={onLoadSuccess}
          renderMode="canvas"
        >
          <Page
            key={pageNumber}
            pageNumber={pageNumber}
          />
        </Document>
      </div>
    </div>
  )
}

PDFを表示する

次のコマンドを実行して、ターミナルで React アプリの PDF ビューアーを実行すると、PDF が正常に表示されます。

npm start

React-PDFの使用上の制限

素晴らしいオープンソース プロジェクトであるにもかかわらず、React-PDF にはいくつかの制限があります。

  • 組み込みユーザーインターフェースの欠如： React-PDFには、あらかじめ設定されたユーザーインターフェースが付属していません。ユーザーがPDFファイル内を移動するためのインターフェースが必要な場合は、ゼロから構築する必要があります。

  • 不完全なテキスト選択: React-PDF のテキスト選択機能は完全に最適化されていないため、PDF ドキュメント内のテキストを強調表示しようとしたときにユーザー エクスペリエンスが低下します。

  • パフォーマンスの課題:特にリソースが限られている環境では、大きな PDF ファイルや複数ページのドキュメントをレンダリングすると、React-PDF のパフォーマンスに負担がかかる可能性があります。

さらに多くの PDF 機能をプロジェクトに統合し、ユーザー エクスペリエンスを向上させたい場合は、2 番目の方法「ComPDF を使用して PDF ビューアを展開する」をお読みください。

ComPDFで React.js PDF ビューアを構築する

さらに、ComPDF for Webも提供しています。これはプロジェクトに簡単に統合でき、次のような必要な機能を追加することで熟練度を高め、ワークフローを簡素化できます。

  • PDF ページの処理。
  • PDF編集。
  • PDF のコメントと返信。
  • PDF ドキュメントに署名します。
  • PDF バージョンの比較。
  • フォームの入力。
  • 機密情報の編集。

ここでは、ComPDF for Web を React プロジェクトにシームレスに統合する方法について、段階的に詳細なガイドを提供します。

新しいReactプロジェクトを作成する

  1. create-react-app を使用して、シンプルな React アプリケーションを構築します。
npx create-react-app compdfkit-react-example
  1. 作成したプロジェクトディレクトリに変更します。
cd compdfkit-react-example

プロジェクトにComPDF for Webを追加する

  1. 「@compdfkit」フォルダをプロジェクトのルートにインポートします。

  2. ComPDFKitViewer.init()を呼び出して、プロジェクト内の ComPDF for Web を初期化します。

PDFを表示する

表示する PDF アドレスとライセンス キーをinit 関数に渡します。

import ComPDFKitViewer from "/@compdfkit/webviewer";

export default function Home() {
  let init = false
  const viewer = useRef(null);
  let docViewer = null
  useEffect(() => {
    if (init) return
    init = true

    ComPDFKitViewer.init({
      pdfUrl: 'Your PDF Url',
      license: 'Input your license here'
    }, viewer.current).then((core) => {
      docViewer = core.docViewer
    })
  });

  return (
  )
}

PDFファイルが開かれ、表示されます。また、 ComPDFのGitHubアカウントからReact PDFビューアのサンプルプロジェクトをダウンロードし、Webデモを直接実行することもできます。処理中に問題が発生した場合は、すぐにご連絡ください。

ビデオガイド: ComPDFKit PDF SDK を使用した React PDF ビューアの構築

ComPDFを使用するメリット

  • 簡単な統合:開発者は、 ComPDF の包括的なドキュメント に従って、わずか数行のコードでこの強力な SDK をアプリケーションに簡単に組み込むことができます。

  • 能上のメリット： React-PDFとは異なり、ComPDFを使用してPDFビューアをデプロイすると、特定のニーズに合わせて比類のないカスタマイズオプションが提供されます。注釈、ドキュメント編集、フォーム処理、デジタル署名などのPDF機能を追加することで、アプリケーションを充実させ、ユーザーエクスペリエンスを大幅に向上させることができます。

  • 卓越したサポートサービス： ComPDFは、24時間年中無休のオンラインおよびメールサポートを提供しています。問題が発生した場合は、オンラインカスタマーサービスチームにご連絡いただければ、迅速かつ効果的な解決策をご提供いたします。

  • 包括的な技術支援:無制限のエラー要求サポートとリモート サービスを提供する ComPDF は、あらゆる開発上の課題に迅速に対処し、スムーズな開発プロセスを実現します。

  • 価格面でのメリット：プロジェクトのテストを容易にするため、ComPDFは30日間の無料トライアルライセンスを提供しています。さらに、個人開発者、中小企業、スタートアップ、非営利団体など向けに、手頃な価格のコミュニティライセンスもご用意しています。

結論

この記事では、まずオープンソースのReact-PDFライブラリを使ってPDFビューアを構築する方法を学びます。次に、機能豊富なComPDFKit React.js PDFビューアの作成方法を紹介します。

ComPDFKit React.js PDFビューアを導入することで、編集、注釈、フォーム処理、デジタル署名など、幅広いPDF機能をアプリケーションに追加できます。開発プロセス中にサポートが必要な場合は、お気軽にお問い合わせください。ComPDFは、迅速なサポートと専門家によるソリューションの提供に尽力しています。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?