cdn活用で高速配信！pdfとjs技術を徹底解説する方法

はじめに

概要

この文書は、CDN経由で入手できるJavaScriptライブラリを使ってPDFを操作する方法を分かりやすく説明します。代表的なライブラリにPDF.js（表示・解析向け）とjsPDF（生成向け）があります。本書では導入方法と基本的な使い方の例を順を追って示します。

誰に向いているか

HTMLと少しのJavaScriptの基礎がある方を想定します。たとえば、ウェブページでPDFを表示したい人、フォームの内容をPDFにして保存したい人に役立ちます。

本章で学べること

• この資料の目的と構成
• 必要な前提知識と準備物（テキストエディタ、ブラウザ、インターネット接続）
• 次章以降の読み方のポイント

準備するもの

• テキストエディタ（例：VS Code、メモ帳）
• 最新のブラウザ（Chrome、Firefoxなど）
• CDNからライブラリを読み込める環境（インターネット接続）

進め方の目安

まずはサンプルHTMLにCDNリンクを貼り、簡単な表示・生成の例を動かしてみてください。実際に触ることで理解が深まります。各章は単独でも参考になるように書きますので、必要な部分だけ参照して進めてください。

PDF.js（PDF表示・解析）

概要

PDF.jsはMozilla製のJavaScriptライブラリで、ブラウザ上でPDFを表示したり解析したりできます。導入は簡単で、CDN経由でスクリプトを読み込むだけです。

導入（CDN例）

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
</script>

基本の読み込み

非同期でPDFを読み込みます。例:

const loadingTask = pdfjsLib.getDocument(url);
const pdf = await loadingTask.promise;
console.log(pdf.numPages);

ページ表示（canvasへ描画）

ページを取得してcanvasに描画します。例:

const page = await pdf.getPage(1);
const viewport = page.getViewport({scale: 1.5});
const canvas = document.getElementById('pdfCanvas');
const ctx = canvas.getContext('2d');
canvas.width = viewport.width; canvas.height = viewport.height;
await page.render({canvasContext: ctx, viewport}).promise;

テキスト抽出

ページからテキストを取り出せます。例:

const textContent = await page.getTextContent();
const text = textContent.items.map(i => i.str).join(' ');
console.log(text);

抽出結果はレイアウトやフォントによって崩れることがあります。

注意点

• 外部PDFはCORS設定が必要です。
• 大きなファイルはメモリや描画負荷に注意してください。
• 文字化けやレイアウト崩れが起きる場合がありますので、用途に応じて後処理してください。

jsPDF（PDF生成）

概要

jsPDFはブラウザ上でPDFを作成する軽量なライブラリです。HTMLやJavaScriptからテキスト、画像、図を組み合わせてPDFファイルを生成し、そのままダウンロードできます。導入はCDNで簡単です。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

基本的な使い方（簡単な例）

const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.text('こんにちは、jsPDF！', 10, 10);
doc.save('sample.pdf');

テキスト位置は左上を基準に座標(x,y)で指定します。フォントサイズはdoc.setFontSize(14)で変更できます。

画像やページ管理

画像はBase64やDataURLで追加できます。

doc.addImage(base64data, 'JPEG', 10, 20, 50, 30);

ページを増やすにはdoc.addPage()を使います。複数ページのドキュメントを順に作成できます。

HTMLからの変換

簡単なHTMLをPDFにするためのhtmlメソッドがありますが、レイアウトによっては別ライブラリの補助が必要になることがあります。

注意点と使いどころ

jsPDFはフォーム付きの複雑なPDFや高精細な印刷物には向きませんが、請求書やレポート、ダウンロード用の簡易PDF作成には便利です。ブラウザ側で完結する点が大きな利点です。

使い方の例

以下は、PDF.jsで表示・抽出し、jsPDFでPDFを生成する実用例です。CDNで簡単に導入できます。

CDN導入

例：

<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist/build/pdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf/dist/jspdf.umd.min.js"></script>

PDF.js：読み込みとCanvas描画（例）

const url = 'sample.pdf';
pdfjsLib.getDocument(url).promise.then(pdf => {
  pdf.getPage(1).then(page => {
    const vp = page.getViewport({scale:1.5});
    const canvas = document.getElementById('canvas');
    canvas.width = vp.width; canvas.height = vp.height;
    page.render({canvasContext: canvas.getContext('2d'), viewport: vp});
  });
});

PDF.js：テキスト抽出（例）

page.getTextContent().then(tc => {
  const text = tc.items.map(i => i.str).join(' ');
  console.log(text);
});

jsPDF：HTML要素をPDFとして保存（例）

const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.html(document.getElementById('target'), {
  callback: d => d.save('output.pdf'), x:10, y:10
});

注意点

• PDFの読み込み元が別ドメインの場合はCORS設定が必要です。
• 複雑なレイアウトやフォントは見た目が変わることがあります。
• 大きなファイルは処理に時間がかかるので非同期で扱い、進捗表示を用いると親切です。