PDFをWebページ内に手軽に埋め込めるEmbedPDFの紹介

最近のブラウザではPDFを表示できますが、別なタブで開くのは面倒です。カタログアプリなどであれば、独自のヘッダーを表示したり、別なデータと連携したりしたいでしょう。

そこで使ってみたいのがEmbedPDFです。軽量で、手軽に使えるPDFビューワーです。

EmbedPDFとは

EmbedPDF は、React/Vue.js/JavaScriptで利用できるオープンソースのPDFビューワーです。各種機能がプラグイン化されており、必要なものだけを組み込んで使えるのが特徴です。

インストール方法

インストールは以下のように npm などが使えます。機能が個別のプラグインになっているので、必要なものをインストールします。

npm install @embedpdf/core @embedpdf/engines \
  @embedpdf/plugin-loader @embedpdf/plugin-viewport \
  @embedpdf/plugin-scroll @embedpdf/plugin-render

基本的な使い方

まずはJavaScriptでの使い方です。JavaScriptはモジュールを使います。

<div id="pdf-viewer" style="height: 500px"></div>
<script async type="module">
  import EmbedPDF from 'https://snippet.embedpdf.com/embedpdf.js';

  const viewer = EmbedPDF.init({
    type: 'container',
    target: document.getElementById('pdf-viewer'),
    src: 'https://snippet.embedpdf.com/ebook.pdf'
  });
</script>

EmbedPDF.init でPDFのURLと、表示するDOMを指定するだけで利用できます。

サムネイル表示もできます。

このJavaScript版が、ほぼ全機能を実装しているように見えます。

Reactの場合

Reactの場合は、デフォルトではシンプルな表示のみで、必要に応じてプラグインを追加していく形になります。現在のReactではNext.jsがデフォルトで組み込まれているので "use client"; が必要です。

"use client";
import { createPluginRegistration } from '@embedpdf/core';
import { EmbedPDF } from '@embedpdf/core/react';
import { usePdfiumEngine } from '@embedpdf/engines/react';

// Import the essential plugins
import { Viewport, ViewportPluginPackage } from '@embedpdf/plugin-viewport/react';
import { Scroller, ScrollPluginPackage } from '@embedpdf/plugin-scroll/react';
import { LoaderPluginPackage } from '@embedpdf/plugin-loader/react';
import { RenderLayer, RenderPluginPackage } from '@embedpdf/plugin-render/react';

// 1. Register the plugins you need
const plugins = [
  createPluginRegistration(LoaderPluginPackage, {
    loadingOptions: {
      type: 'url',
      pdfFile: {
        id: 'example',
        url: 'https://snippet.embedpdf.com/ebook.pdf',
      },
    },
  }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),
];

export default () => {
  // 2. Initialize the engine with the React hook
  const { engine, isLoading } = usePdfiumEngine();
  if (isLoading || !engine) {
    return <div>Loading PDF Engine...</div>;
  }

  // 3. Wrap your UI with the <EmbedPDF> provider
  return (
    <div style={{ height: '700px' }}>
      <EmbedPDF engine={engine} plugins={plugins}>
        <Viewport
          style={{
            backgroundColor: '#f1f3f5',
          }}
        >
          <Scroller
            renderPage={({ width, height, pageIndex, scale }) => (
              <div style={{ width, height }}>
                {/* The RenderLayer is responsible for drawing the page */}
                <RenderLayer pageIndex={pageIndex} scaleFactor={scale} />
              </div>
            )}
          />
        </Viewport>
      </EmbedPDF>
    </div>
  );
};

このとき注意が必要なのは、URLで指定するPDFはCORS制限に関係するということです。そのため、任意のPDFを表示できるわけではないので注意してください。

日本語PDFもOK

すべてのフォントに対応しているわけではないと思いますが、日本語のPDFも表示できます。

ズーム機能を追加する流れ

npmで見ると、EmbedPDFには数多くのプラグインが用意されています。今回はズームプラグインを追加する流れです。今回はReactを例にします。

まず、プラグインをインストールします。

npm install @embedpdf/plugin-zoom

プラグインを登録する

インストールしたプラグインを、EmbedPDFに登録します。

import { ZoomPluginPackage } from '@embedpdf/plugin-zoom/react';

const plugins = [
  // 既存の設定
  createPluginRegistration(LoaderPluginPackage, { /* ... */ }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),

  // ここにZoomプラグインを追加
  createPluginRegistration(ZoomPluginPackage, {
    defaultZoomLevel: 1.5, // オプションがある場合は、ここで指定
  }),
];

コンポーネントを作成

import { useZoom } from '@embedpdf/plugin-zoom/react';

export const ZoomToolbar = () => {
  const { provides: zoomProvides, state: zoomState } = useZoom();

  if (!zoomProvides) {
    return null;
  }

  return (
    <div>
      <span>Current Zoom: {Math.round(zoomState.currentZoomLevel * 100)}%</span>
      <button onClick={zoomProvides.zoomOut}>-</button>
      <button onClick={zoomProvides.zoomIn}>+</button>
      <button onClick={() => zoomProvides.requestZoom(1.0)}>Reset</button>
    </div>
  );
};

コンポーネントを追加

作成したコンポーネントを追加します。

import { ZoomToolbar } from './ZoomToolbar'; // 1. コンポーネントをインポート

// :
return (
  <div style={{ height: '500px', border: '1px solid black', display: 'flex', flexDirection: 'column' }}>
    <EmbedPDF engine={engine} plugins={plugins}>
      <div style={{display: 'flex, height: '100%', flexDirection: 'column'}}>
        <ZoomToolbar /> {/* 2. コンポーネントを追加 */}
        <div style={{ flex: 1, overflow: 'hidden' }}>
          <Viewport>
            {/* 既存の処理 */}
          </Viewport>
        </div>
      </div>
    </EmbedPDF>
);

これで、ズーム機能が追加されました。

他のプラグイン

他にもプラグインは多数あり、デモで確認できます。アノテーションやPDFダウンロード、塗りつぶし、回転、スクリーンショットなど必要に応じて追加できます。

注意

EmbedPDFでは、PDFの各ページを画像にして表示しています。そのため、透明テキストの情報がなかったり、テキストを選択できなくなっています。

まとめ

EmbedPDFはとても手軽に使えるPDFビューワーです。EmbedPDFであれば、PDFをページ内に表示することもできますし、外部のリアクションに応じた処理も行えます。

PDFを表示したい場合は、ぜひ試してみてください。

Open-Source JavaScript PDF Viewer – Fast, Customizable & Framework-Agnostic | EmbedPDF