思いどおりにカスタマイズできる UI

シンプルなコードによる実装

• 基本処理のコード例
• カスタム ツールバーの例
• 注釈を生成するコード例

              import PSPDFKit from "pspdfkit";

              const instance = await PSPDFKit.load({
                container: "#pspdfkit",
                document: "<pdf-file-path>",
                licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"
              });

              console.log("PSPDFKit for Web is ready!");
              console.log(instance);
               
            

              const PSPDFKit = require("pspdfkit");

              PSPDFKit.load({
                container: "#pspdfkit",
                document: "<pdf-file-path>",
                licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"
              }).then(function(instance) {
                console.log("PSPDFKit for Web is ready!");
                console.log(instance);
              })
               
            

              import PSPDFKit from "pspdfkit";

              const instance = await PSPDFKit.load({
                container: "#pspdfkit",
                document: "<pdf-file-path>",
                licenseKey: "YOUR_LICENSE_KEY_GOES_HERE",
                toolbarItems: [...PSPDFKit.defaultToolbarItems, {
                  type: "custom",
                  id: "my-button",
                  title: "My Button",
                  onPress: event => {
                    alert("hello from my button");
                  }
                }]
              });

               
            

              const PSPDFKit = require("pspdfkit");

              PSPDFKit.load({
                container: "#pspdfkit",
                document: "<pdf-file-path>",
                licenseKey: "YOUR_LICENSE_KEY_GOES_HERE",
                toolbarItems: PSPDFKit.defaultToolbarItems.concat([{
                  type: "custom",
                  id: "my-button",
                  title: "My Button",
                  onPress: function(event) {
                    alert("hello from my button");
                  }
                }])
              });
               
            

              import PSPDFKit from "pspdfkit";

              const instance = await PSPDFKit.load({
              container: "#pspdfkit",
              document: "<pdf-file-path>",
              licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"
              });

              const annotation = new PSPDFKit.Annotations.LineAnnotation({
                pageIndex: 0,
                startPoint: new PSPDFKit.Geometry.Point({ x: 95, y: 95}),
                endPoint: new PSPDFKit.Geometry.Point({ x: 195, y: 195}),
                boundingBox: new PSPDFKit.Geometry.Rect({
                  left: 90,
                  top: 90,
                  width: 200,
                  height: 200,
                }),
              });

              instance.createAnnotation(annotation);
               
            

              const PSPDFKit = require("pspdfkit");

              PSPDFKit.load({
                container: "#pspdfkit",
                document: "<pdf-file-path>",
                licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"
              }).then(instance => {
                const annotation = new PSPDFKit.Annotations.LineAnnotation({
                  pageIndex: 0,
                  startPoint: new PSPDFKit.Geometry.Point({ x: 95, y: 95}),
                  endPoint: new PSPDFKit.Geometry.Point({ x: 195, y: 195}),
                  boundingBox: new PSPDFKit.Geometry.Rect({
                    left: 90,
                    top: 90,
                    width: 200,
                    height: 200,
                  }),
                });

                instance.createAnnotation(annotation);
              })
               
            

サーバーがなくても問題ありません

PSPDFKit for Web は、WebAssembly テクノロジを使用した安定した C++ Core エンジンとして、ブラウザー内で 100% 動作します。

クライアントサイドまたはサーバーサイドで実装

PSPDFKit for Web が、クライアントサイドのブラウザー内で完全に動作する一方で、PSPDFKit Document Engine によりサーバーサイドでのドキュメント ストリーミングやリアルタイムなコラボレーションの実装によるパフォーマンスを強化することもできます。

	PSPDFKit for Web (クライアントサイド)	PSPDFKit for Web + Document Engine (サーバーサイド)
HTML5 ベースのユーザー インターフェイス
デプロイメント	WebAssembly によるブラウザー内の C++ Core	自社管理または PSPDFKit 管理のサーバー
クライアントサイドのドキュメント レンダリング
サーバーサイドのドキュメント レンダリング
高速なレンダリング パフォーマンス
リアルタイム コラボレーション、OCR、ドキュメント生成ツール機能
特長	JavaScript や UI アセットを使用して簡単にデプロイ XFDF または Instant JSON によるドキュメント編集 専用のサーバーは不要	オンデマンド ページ ストリーミングによる高速な読み込み JWT を使用してドキュメントへ安全にアクセス ドキュメントの同期、リアルタイム コラボレーション
ドキュメント	JavaScript PDF Library (英語)	Document Engine PDF Server (英語)

主なコンポーネント

開発するアプリケーションの機能拡張に合わせて、必要な機能 (コンポーネント) を後から追加することができます。

ビューアー機能

高性能なドキュメント ビューアーによる、より良いユーザー エクスペリエンスを提供します。

• ビューアー
  PSPDFKit の SDK 製品の基盤となる高性能な PDF ビューアーです。詳細はこちら。
• フォーム ビューアー
  PDF フォームやフォーム フィールドに保存されたデータを閲覧できます。詳細はこちら。

マークアップ

バラエティ豊富なドキュメント編集、注釈処理ツールを提供します。

• 注釈
  テキスト、インク、スタンプ、図形、強調表示など、さまざまな注釈を追加できます。詳細はこちら。
• 電子的な署名
  あらゆるドキュメントに対して簡単に、描画、画像追加、スタイル設定された署名の選択や追加などができます。詳細はこちら。
• デジタル署名
  ドキュメントの閲覧、承認、個人証明書によるセキュアな暗号化署名を可能にします。詳細はこちら。
• ドキュメントの編集
  ページの移動、回転、複製、削除、追加などのドキュメント編集が可能です。詳細はこちら。
• フォーム入力
  PDF フォームによるデータの入力や保存だけでなく、フォームの送信もサポートします。詳細はこちら。

コラボレーション

簡単に統合できるチーム メンバー間のドキュメント連携ツール

• インスタント
  リアルタイムな連携、同期、オフライン サポート、データ セキュリティをアプリに追加できます。詳細はこちら。
• コメントと返信
  ドキュメントの詳細についてリアルタイムにやりとりできます。詳細はこちら。

高度なツール

PSPDFkit が提供する高度なドキュメント ツールでシンプルな閲覧やマークアップが可能になります。

• フォーム生成
  PDF フォームをすばやく簡単にデザインできます。詳細はこちら。
• マスキング
  プリセットやパターンを定義してテキストや画像データを除去できます。詳細はこちら。
• OCR
  スキャンしたり PDF に含まれていたりするテキストを編集可能にして、注釈ツールで操作できるようになります。詳細はこちら。
• ドキュメントの比較
  たとえば、建築設計図のベクター データを比較する際に役立ちます。詳細はこちら。
• PDF の生成
  HTML のテンプレートからシームレスに PDF ドキュメントを生成できます。詳細はこちら。
• 計測ツール
  さまざまな計測ツールをツールバーに追加することで、ページ内の図面の長さ、外周、面積を計測できます。詳細はこちら。
• コンテンツの編集
  コンテンツの編集ツールをアプリケーションに組み込むことで、PDF 内のテキストを追加、削除、編集できます。詳細はこちら。

さまざまなファイル形式に対応

MS Office や画像などの一般的なファイル形式をサポートします。

• Office ファイル
  Office ファイル形式を PDF に変換することでクロスプラットフォームでのワークフローを簡素化できます。詳細はこちら。
• 画像ドキュメント
  PSPDFKit の注釈ツールにより、編集不可の画像ファイルの注釈を追加できます。詳細はこちら。
• PDF/A の変換
  長期保存用に PDF の品質や可用性はそのままで PDF/A に変換できます。詳細はこちら。

• 製品ごとに提供されるコンポーネントと機能の詳細は「Licensable Components and Their Features」をご確認ください。