React PDFエディターコンポーネント
React用のPDFエディターをお探しですか？ほとんどの選択肢は低レベルのビューアーで、編集UIを自分で構築する必要があります。SimplePDFは完全なエディターを提供します – テキスト、署名、フォーム記入、注釈 – すべてが1つのReactコンポーネントとして。PDF.jsの苦労も、Canvasレンダリングも、ツールバーの組み立ても不要です。
インストールと使い方
npm install @simplepdf/react-embed-pdfimport { EmbedPDF } from '@simplepdf/react-embed-pdf';
<EmbedPDF
companyIdentifier="yourcompany"
mode="inline"
style={{ width: 900, height: 800 }}
documentURL="https://cdn.simplepdf.com/simple-pdf/assets/forms/fw4.pdf"
/>import { EmbedPDF } from '@simplepdf/react-embed-pdf';
<EmbedPDF companyIdentifier="yourcompany">
<a href="https://cdn.simplepdf.com/simple-pdf/assets/forms/fw4.pdf">
Open PDF editor
</a>
</EmbedPDF>プログラマティック制御
useEmbed()フックを使用してコードからエディターを制御できます：ドキュメントの送信、ページのナビゲーション、ツールの選択、フォームフィールドの検出、コンテンツの抽出。
import { EmbedPDF, useEmbed } from '@simplepdf/react-embed-pdf';
const Editor = () => {
const { embedRef, actions } = useEmbed();
return (
<>
<button onClick={() => actions.submit({
downloadCopyOnDevice: false
})}>
Submit
</button>
<button onClick={() => actions.selectTool('SIGNATURE')}>
Sign
</button>
<button onClick={() => actions.detectFields()}>
Detect Fields
</button>
<EmbedPDF
companyIdentifier="yourcompany"
ref={embedRef}
mode="inline"
style={{ width: 900, height: 800 }}
documentURL="https://cdn.simplepdf.com/simple-pdf/assets/forms/fw4.pdf"
/>
</>
);
};ユーザーができること
PDFフォームの記入
フォームフィールドを自動検出。ユーザーはテキスト入力、チェックボックス、ドロップダウン、ラジオボタンをネイティブに操作できます。
ドキュメントへの署名
署名を描画、入力、またはアップロード。デスクトップとモバイルの両方で動作します。
テキストと注釈の追加
フリーテキスト、ハイライト、スタンプ、画像。PDF上に直接レンダリングされます。
バックエンドへの送信
完成したPDFはWebhookでAPIに送信されるか、S3/Azureバケットに保存されます。
PDF.jsやreact-pdfではなくSimplePDFを選ぶ理由
ビューアーではなく完全なエディター
PDF.jsとreact-pdfはビューアーです。編集するには、フォーム入力、署名パッド、注釈レイヤーを自分で構築する必要があります。SimplePDFはこれらすべてを含んでいます。
ホワイトラベル対応
あなたのロゴ、あなたのカラー、あなたのドメイン。ダッシュボードからブランディングを設定し、プログラマティック制御で編集体験を完全にホワイトラベル化できます。
サーバー不要
すべてブラウザ上で実行されます。サーバーへのファイルアップロードも、PDF処理バックエンドの保守も不要です。
メンテナンス済み製品
エディターの保守は不要です。レンダリングのバグ、ブラウザ互換性、PDF仕様のエッジケースは私たちが対応します。
SimplePDF is a great tool that was very easy to implement into our web portal. They have straight forward and clear documentation on setting it up and then plenty of resources on how to utilize it even further to fit your development environment.
お使いのスタックで動作
ReactコンポーネントはNext.js（App RouterとPages Router）、Remix、Vite、Create React Appで動作します。iframeとしてレンダリングされるため、CSSの競合やバンドルサイズの心配はありません。
質問がありますか？
記入済みPDFはどのように取得できますか？
Webhookを設定して、完成したPDFをAPIエンドポイントで受け取ります。またはBring-Your-Own-Storageを使用：S3、Azure Blob Storage、またはSharePointでバケットに直接配信。
Reactコンポーネントは無料ですか？
コンポーネントは無料でオープンソース（MIT）です。無料プランではSimplePDFブランディング付きの完全な編集が含まれます。有料プランではブランディングが削除され、Webhook、BYOS、ホワイトラベルが追加されます。
Next.jsで動作しますか？
はい。コンポーネントはApp RouterとPages Routerの両方で動作します。iframeとしてレンダリングされるため、SSRハイドレーションの問題はありません。
任意のPDFを読み込めますか？
はい。documentURLを渡すか、ユーザーにデバイスからアップロードさせます。PDFは完全にブラウザ内で処理されます – あなたのサーバーにも私たちのサーバーにも触れません。
どのようなプログラマティックアクションが利用できますか？
useEmbed()フックでは以下が利用可能です：submit()、goTo({ page })、selectTool()、detectFields()、removeFields()、getDocumentContent()。すべて型付き結果を持つPromiseを返します。