PDF Oxide(WASM)入門
PDF Oxide は WebAssembly にコンパイルでき、ブラウザ、Deno、Bun、Cloudflare Workers や Vercel Edge などのエッジランタイムで動作します。Python、Rust、Node.js、Go、C# の各バインディングを支える Rust コアがそのまま JavaScript 環境で動き、ネイティブに近い速度を発揮します。
Node.js をお使いですか? サーバーサイドではネイティブ N-API アドオンの
pdf-oxideが高速で、OCR、レンダリング、署名にも対応しているためおすすめです。本ページの WASM ビルドは、ネイティブアドオンを読み込めないブラウザやエッジランタイム向けです。
インストール
npm install pdf-oxide-wasm
import { WasmPdfDocument, WasmPdf } from "pdf-oxide-wasm";
クイックスタート
Node.js
import { readFileSync } from "fs";
import { WasmPdfDocument } from "pdf-oxide-wasm";
const bytes = new Uint8Array(readFileSync("document.pdf"));
const doc = new WasmPdfDocument(bytes);
console.log(`Pages: ${doc.pageCount()}`);
console.log(doc.extractText(0));
doc.free();
ブラウザ
<script type="module">
import init, { WasmPdfDocument } from "pdf-oxide-wasm";
await init();
const response = await fetch("document.pdf");
const bytes = new Uint8Array(await response.arrayBuffer());
const doc = new WasmPdfDocument(bytes);
console.log(`Pages: ${doc.pageCount()}`);
console.log(doc.extractText(0));
doc.free();
</script>
ファイル入力付きブラウザ
<input type="file" id="pdfInput" accept=".pdf" />
<pre id="output"></pre>
<script type="module">
import init, { WasmPdfDocument } from "pdf-oxide-wasm";
await init();
document.getElementById("pdfInput").addEventListener("change", async (e) => {
const file = e.target.files[0];
const bytes = new Uint8Array(await file.arrayBuffer());
const doc = new WasmPdfDocument(bytes);
let result = `Pages: ${doc.pageCount()}\n\n`;
for (let i = 0; i < doc.pageCount(); i++) {
result += `--- Page ${i + 1} ---\n`;
result += doc.extractText(i) + "\n\n";
}
document.getElementById("output").textContent = result;
doc.free();
});
</script>
テキスト抽出
単一ページ
const doc = new WasmPdfDocument(bytes);
const text = doc.extractText(0);
全ページ
const allText = doc.extractAllText();
構造化抽出
文字単位、スパン単位で位置情報とフォント情報を取得できます。
// 文字単位のデータ
const chars = doc.extractChars(0);
for (const c of chars) {
console.log(`'${c.char}' at (${c.bbox.x}, ${c.bbox.y}) font=${c.fontName}`);
}
// スパン単位のデータ
const spans = doc.extractSpans(0);
for (const span of spans) {
console.log(`"${span.text}" size=${span.fontSize}`);
}
Markdown 変換
const markdown = doc.toMarkdown(0);
// オプション指定
const md = doc.toMarkdown(0, true, true); // detect_headings, include_images
// 全ページ
const allMarkdown = doc.toMarkdownAll();
HTML 変換
const html = doc.toHtml(0);
// 全ページ
const allHtml = doc.toHtmlAll();
PDF 作成
Markdown、HTML、プレーンテキストから新しい PDF を WasmPdf で生成できます。
import { WasmPdf } from "pdf-oxide-wasm";
// Markdown から
const pdf = WasmPdf.fromMarkdown("# Hello World\n\nThis is a PDF.");
const pdfBytes = pdf.toBytes(); // Uint8Array
// HTML から
const invoice = WasmPdf.fromHtml("<h1>Invoice</h1><p>Amount: $42</p>");
// プレーンテキストから
const notes = WasmPdf.fromText("Plain text content.");
// ファイルへ保存(Node.js)
import { writeFileSync } from "fs";
writeFileSync("output.pdf", pdf.toBytes());
フォームフィールド
const fields = doc.getFormFields();
for (const f of fields) {
console.log(`${f.name} (${f.fieldType}) = ${f.value}`);
}
// フォームデータのエクスポート
const fdfBytes = doc.exportFormData(); // FDF 形式
const xfdfBytes = doc.exportFormData("xfdf"); // XFDF 形式
検索
// 全ページを検索
const results = doc.search("configuration", true); // case_insensitive
for (const r of results) {
console.log(`Found "${r.text}" on page ${r.page}`);
}
// 単一ページを検索
const pageResults = doc.searchPage(0, "configuration", true);
バイト列から開く
WasmPdfDocument のコンストラクタは Uint8Array を直接受け取るため、別途 from_bytes メソッドは不要です。
// そのまま動作します — WasmPdfDocument はバイト列を受け取ります
const doc = new WasmPdfDocument(uint8Array);
暗号化 PDF
const doc = new WasmPdfDocument(encryptedBytes);
const success = doc.authenticate("password");
if (success) {
console.log(doc.extractText(0));
}
編集
const doc = new WasmPdfDocument(bytes);
// メタデータ
doc.setTitle("Updated Title");
doc.setAuthor("Jane Doe");
// ページ回転
doc.rotatePage(0, 90);
// 変更を保存
const edited = doc.save();
// 暗号化して保存
const encrypted = doc.saveEncryptedToBytes(
"user-password",
"owner-password",
true, // allow_print
true, // allow_copy
false, // allow_modify
true // allow_annotate
);
メモリ管理
WASM オブジェクトは Rust のメモリを保持するため、明示的に解放する必要があります。
const doc = new WasmPdfDocument(bytes);
try {
const text = doc.extractText(0);
} finally {
doc.free();
}
機能対応表
一部の機能はネイティブ依存が必要で、WebAssembly ビルドでは利用できません。
| 機能 | WASM | 備考 |
|---|---|---|
| テキスト抽出 | Yes | 完全対応 |
| PDF 作成 | Yes | Markdown、HTML、テキスト |
| PDF 編集 | Yes | 完全対応 |
| 暗号化 | Yes | AES-256 |
| OCR | No | ネイティブ ONNX Runtime が必要 |
| デジタル署名 | No | ネイティブ暗号化ライブラリが必要 |
| ページレンダリング | No | ネイティブ tiny-skia が必要 |
OCR やレンダリングが必要な場合は Python または Rust のバインディングをお使いください。
次のステップ
- Python 入門 – Python から PDF Oxide を利用する
- Rust 入門 – Rust から PDF Oxide を利用する
- JavaScript API リファレンス – WASM API の完全なドキュメント
- テキスト抽出 – 抽出オプションの詳細
- PDF 作成 – 高度な作成方法