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仕様のエッジケースは私たちが対応します。
Healthcare · HIPAA-compliant workflowsSimplePDF 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の競合やバンドルサイズの心配はありません。