PDFビューワを使用することで、PDFドキュメントを他のユーザーと共有できます。ドキュメントは、表示モードまたは編集モードで共有でき、複数のユーザーがリアルタイムで作業できます。また、リアルタイムコラボレーションと呼ばれる、共有ドキュメントで他のユーザーの存在とユーザーによる変更を確認することもできます。
以下の画像は、複数のユーザーによって編集された共有モードのPDFドキュメントを示し、変更点はユーザー名とともに表示されます。
SupportApiを使用するように構成すると、PDFドキュメントは次の方法で編集できます。
複数のユーザーが共有ドキュメントで作業できる共有モードは、永続的なクライアント接続でのみ機能するように設計されています。これを確実にするために、SupportApiには次のnugetパッケージの依存関係が含まれています。
共有ドキュメントが編集されると、サーバー側のSupportApiコードは変更点を受信して即時に接続されたクライアントに送信します。
共有モードの永続的なクライアント接続をサポートするには、Startup.csファイルを編集してWebアプリケーションを構成します。
メモ:ASP.NET CoreプロジェクトでSupportApiを使用するには、ASP.NET Core3.0以降が必要です。既存のASP.NETCore 2.2プロジェクトを3.0にアップグレードする方法の詳細については、このリンクを参照してください。
共有モードでPDFドキュメントを変更すると、変更されたドキュメントはデフォルトでサーバーのメモリに保存されますが、その変更点は、次のいずれかの場合に破棄されます。
以下のいずれかの方法で回避できます。
PDFビューワのツールバーに存在する[共有]ボタンを使用することで、PDFドキュメントを共有できます。
次のコードを使用して[共有]ボタンをツールバーに追加します。
Index.cshtml |
コードのコピー
|
---|---|
viewer.toolbarLayout.viewer.default = ["share"]; viewer.applyToolbarLayout(); |
[共有]ボタンをクリックすると、[アクセス管理]ダイアログが開きます。
[アクセス管理]ダイアログでユーザーにアクセスを提供し、権限を「表示のみ」や「表示と変更」に設定することができます。
既存ユーザーのアクセスを変更したり、ドキュメントの共有を停止したりすることもできます。
[共有ドキュメント]パネルを使用して共有されたPDFドキュメントを開くことができます。このパネルには、現在のユーザーが共有しているドキュメント、アクセスできるすべてのドキュメントと、アクセスモードに関する情報が一覧表示されます。
次のコードを使用することで、[共有ドキュメント]パネルをサイドバーパネルに追加することができます。
Index.cshtml |
コードのコピー
|
---|---|
var viewer = new DsPdfViewer("#root", { supportApi: 'api/pdf-viewer'} ); viewer.addSharedDocumentsPanel(); |
複数のユーザーが同時にPDFドキュメントで共同作業を行う場合、ユーザーの名前とともにリアルタイムの変更を確認できます。共有ドキュメントを開くと、次のように、ドキュメントのアクセスタイプが記載された「共有モード」ラベルがドキュメントの右上に表示されます。
APIでのsharingオプションを使用することでもドキュメントの共有設定を行うことができます。
Index.cshtml |
コードのコピー
|
---|---|
var viewer = new DsPdfViewer("#root", { userName: "John", sharing: { disallowUnknownUsers: true }, supportApi: "api/pdf-viewer" } ); |
Index.cshtml |
コードのコピー
|
---|---|
var viewer = new DsPdfViewer("#root", { userName: "John", sharing: { knownUserNames: ["Jaime Smith", "Jane Smith"], disallowUnknownUsers: true, }, supportApi: "api/pdf-viewer" }); |
Index.cshtml |
コードのコピー
|
---|---|
var viewer = new DsPdfViewer("#root", { sharing: { knownUserNames: ['Jamie Smith', 'Lisa'], presenceColors: { 'Anonymous': '#999999', 'Jamie Smith': 'red', 'Lisa': 'blue' } }, supportApi: "api/pdf-viewer" }); |
Index.cshtml |
コードのコピー
|
---|---|
// presenceModeをothersに設定します var viewer = new DsPdfViewer("#root", { sharing: { presenceMode: 'others' }, supportApi: "api/pdf-viewer" }); |