カスタム JavaScript PDF ビューアーの構築: PDF.js と Apryse WebViewer の比較

2025.02.21

概要: カスタム JavaScript PDF ビューアーをゼロから構築するには、他のソリューションに比べて追加の手順が必要になる場合がありますが、プロジェクトの特定のニーズに合わせて機能、外観、パフォーマンスをより細かくカスタマイズできます。このブログでは、PDF.js と Apryse WebViewer を使用して基本的な PDF ビューアーを構築する方法をご紹介します。

はじめに

既存の PDF ライブラリの制限に縛られていると感じたことはありませんか? あるいは、ゼロから何かを作成するという課題に興味があるかもしれません。このブログでは、オープンソース ソリューションの PDF.js と商用ソリューションの Apryse WebViewer を使用して、カスタム JavaScript PDF ビューアーを構築する方法について説明します。キャリアの初心者でも、経験豊富な開発者でも、カスタム PDF 表示エクスペリエンスを作成することで、機能、外観、パフォーマンスを特定のニーズに合わせて自由にカスタマイズできます。

PDF.js

PDF.js を使用して JavaScript PDF ビューアーを作成する方法

1. JavaScript PDF ビューアーを設定するための index.html ページを作成し、次のコードを追加します。

<!DOCTYPE html> 
<html> 
    <head> 
      <title>PDF Viewer</title> 
      <meta charset="UTF-8" /> 
    </head> 
    <body> 
      <div id="app"> 
        <div role="toolbar" id="toolbar"> 
          <div id="pager"> 
            <button data-pager="prev">prev</button> 
            <button data-pager="next">next</button> 
          </div> 
          <div id="page-mode"> 
            <label>Page Mode 
              <input type="number" value="1" min="1" /> 
            </label> 
          </div> 
        </div> 
        <div id="viewport-container"> 
          <div role="main" id="viewport"></div> 
        </div> 
      </div> 
      <!-- Load PDF.js library --> 
      <script src="https://unpkg.com/pdfjs-dist@latest/build/pdf.min.mjs" type="module"></script> 
      <script src="index.js" type="module"></script> 
    </body> 
</html>

2. 次に、ビューアーで使用する関数用の index.js という JavaScript ファイルを作成します。ここからは、このファイルにコードを追加し、各部分の動作を確認していきます。

3. PDF.js ライブラリをインポートするには、index.js ファイルに次のコードを追加します。

import * as pdfjsLib from 'https://unpkg.com/pdfjs-dist@latest/build/pdf.min.mjs';
// Setting worker src for PDF.js.
pdfjsLib.GlobalWorkerOptions.workerSrc =
'https://unpkg.com/pdfjs-dist@latest/build/pdf.worker.min.mjs';

4. PDF ファイルを管理するために次の変数を定義します。

let currentPageIndex = 0;
let pageMode = 1; // Determines the number of pages shown at a time.
let cursorIndex = Math.floor(currentPageIndex / pageMode);
let pdfInstance = null; // Holds the PDF document instance.
let totalPagesCount = 0; // Total number of pages in the PDF.
const viewport = document.querySelector('#viewport');

5. PDF を読み込み、初期化し、レンダリングするためのこの関数を追加します。index.js ファイルの最後にある関数を呼び出して PDF を読み込みます。

window.initPDFViewer = function (pdfURL) {
  pdfjsLib.getDocument(pdfURL).promise.then((pdf) => {
  pdfInstance = pdf;
  totalPagesCount = pdf.numPages;
  initPager(); // Initializes the page navigation.
  initPageMode(); // Initializes the page mode (single or multiple pages).
  render(); // Renders the initial page.
  });
};

6. 次のコードを使用して、イベント リスナーを使用して PDF 内を前後に移動するためのボタンを追加します。

function onPagerButtonsClick(event) {
  const action = event.target.getAttribute('data-pager');
  if (action === 'prev') {
    if (currentPageIndex === 0) return;
    currentPageIndex -= pageMode;
    if (currentPageIndex < 0) currentPageIndex = 0;
    render();
  }
  if (action === 'next') {
    if (currentPageIndex === totalPagesCount - 1) return;
    currentPageIndex += pageMode;
    if (currentPageIndex > totalPagesCount - 1)
    currentPageIndex = totalPagesCount - 1;
    render();
  }
}

7. この関数を使用して、pageMode の変更を処理するために、単一ページ ビューと複数ページ ビューを切り替えるオプションを設定します。

function onPageModeChange(event) {
  pageMode = Number(event.target.value);
  render();
}
function initPageMode() {
  const input = document.querySelector('#page-mode input');
  input.setAttribute('max', totalPagesCount);
  input.addEventListener('change', onPageModeChange);
}

8. レンダリング関数は、pdfInstance.getPage() を使用して、pageMode と currentPageIndex の値に基づいてページをレンダリングします。各ページは、 canvas 要素を含む <div> コンテナー内に表示されます。次のコードを index.js ファイルに追加します。

function render() {
  cursorIndex = Math.floor(currentPageIndex / pageMode);
  const startPageIndex = cursorIndex * pageMode;
  const endPageIndex =
    startPageIndex + pageMode < totalPagesCount
    ? startPageIndex + pageMode - 1
    : totalPagesCount - 1;
  const renderPagesPromises = [];
  for (let i = startPageIndex; i <= endPageIndex; i++) {
    renderPagesPromises.push(pdfInstance.getPage(i + 1));
  }
  Promise.all(renderPagesPromises).then((pages) => {
    const pagesHTML = pages
    .map(
      () =>
        `<div style="width: ${
          pageMode > 1 ? '50%' : '100%'
        }"><canvas></canvas></div>`,
      )
    .join('');
  viewport.innerHTML = pagesHTML;
  pages.forEach((page, index) => renderPage(page, index));
 });
}

9. これで、最後の関数を追加する準備ができました。 この関数は、各ページを独自のキャンバス要素にレンダリングし、コンテナーの幅に合わせてスケールを調整します。

function renderPage(page, pageIndex) {
  let pdfViewport = page.getViewport({ scale: 1 });
  const container = viewport.children[pageIndex]; // Correctly map the page to its container.
  if (!container) {
    console.error('Container not found for page ' + pageIndex);
  return;
  }
 const canvas = container.querySelector('canvas');
 const context = canvas.getContext('2d');
 pdfViewport = page.getViewport({
  scale: container.offsetWidth / pdfViewport.width,
 });
 canvas.height = pdfViewport.height;
 canvas.width = pdfViewport.width;
 page.render({
  canvasContext: context,
  viewport: pdfViewport,
 });
}

10. 最後に、次のコードを使用して、レンダリングする PDF のパスを指定して initPDFViewer 関数を呼び出します。

// Initialize the PDF viewer with the example file.
initPDFViewer('assets/example.pdf');

読み込む PDF のパスと名前を必ず指定してください。

11. index.html Web ページを読み込むと、PDF が表示されます。

簡単な手順をいくつか実行するだけで、JavaScript と PDF.js を使用して基本的な PDF ビューアーを作成できます。

Apryse WebViewer

小さくてシンプルな PDF の基本的な表示には、PDF.js などのオープンソース オプションがコスト効率に優れていますが、欠点もあります。Apryse WebViewer などの商用オプションは、より複雑な機能を提供し、より充実したエクスペリエンスを実現します。

WebViewer は、すべてのフレームワークおよびブラウザーと互換性のある JavaScript ドキュメント SDK であり、単一のカスタマイズ可能なコンポーネントとしてすぐに使用できる完全な機能を備えており、ブラウザー内で直接 PDF を表示、作成、検索、注釈付け、編集できます。

1. WebViewer をダウンロードし、.zip ファイルをプロジェクト ディレクトリに解凍します。

2. index.html Web ページを作成し、次のコードを追加します。

<!DOCTYPE html>
<html style="height:100%;">
  <head>
    <meta http-equiv="Content-Type" content="text/html">
    <script src="WebViewer/lib/webviewer.min.js"></script>
  </head>
  <body style="width:100%; height:100%; margin:0px; padding:0px; overflow:hidden">
    <div id="viewer" style="height: 90%; overflow: hidden;"></div>
  </body>
</html>

3. 次に、index.html ファイルで、 PDF の <div> タグのすぐ下に、ビューアーで使用する JavaScript 関数の次のコードを追加します。

<script>
	WebViewer({
    path: 'WebViewer/lib', // path to the Apryse 'lib' folder on your server
    licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
    initialDoc: 'WebViewer/samples/files/demo.pdf', // You can also use documents on your server
    disabledElements: [ // hide the default UI elements
	    'printButton',
	    'downloadButton',
	    'view-controls-toggle-button',
	    'leftPanelButton',
	    'searchPanelToggle',
	    'menuButton',
	    'highlightToolButton',
	    'underlineToolButton',
	    'strikeoutToolButton',
	    'squigglyToolButton',
	    'freeTextToolButton',
	    'markInsertTextToolButton',
	    'markReplaceTextToolButton',
	    'stickyToolButton',
	    'calloutToolButton',
	    'freeHandToolButton',
	    'freeHandHighlightToolButton',
	    'eraserToolButton',
	    'page-nav-floating-header',
      'viewControlsButton',
      'viewControlsOverlay',
      'default-top-header',
      'tools-header'
    ]
  }, document.getElementById('viewer'))
  .then(instance => {
});
</script>

パスが正しいことを確認することが重要です。デフォルトの WebViewer UI 要素も非表示になっていることに注意してください。いくつか追加するか、独自のカスタマイズされた UI を作成することもできます。

4. サーバーを起動します。

すでにローカル サーバーがセットアップされている場合は、プロジェクト フォルダーでターミナルを開き、次のコマンドを実行します。

http-server -a localhost

ローカル サーバーがまだない場合は、次の 2 つの手順に従ってください。

a. プロジェクト フォルダーでターミナルを開き、次を実行します。

npm install -g http-server

b. 次のコマンドを実行してサーバーを起動します。

http-server -a localhost

5.  http://localhost:8080/index.html  Web ページを開くと、PDF が表示されます。

おめでとうございます! JavaScript と WebViewer を使用して基本的な PDF ビューアーを設定できました。

さいごに

カスタム JavaScript PDF ビューアーを作成すると、機能、外観、パフォーマンスを調整して、あらゆるプロジェクトにカスタマイズされたビューアーを提供できます。他のソリューションと比べていくつかの追加手順があるかもしれませんが、このブログでは、コーディング経験に関係なく、簡単に理解して実装できるようにプロセスを説明しました。Apryse WebViewer は、高度にカスタマイズ可能な SDK で強力な機能を提供するため、ここで取り上げた例の中ではより好ましいソリューションです。

Apryse では無償トライアルも提供しています。是非お試しください。

Apryse 製品の詳細は、弊社 Web サイトをご確認ください。

記事参照：
© 2025 Apryse
「Building a Custom JavaScript PDF Viewer: PDF.js vs Apryse WebViewer」

タイトルとURLをコピーしました