Aspose.PDF エディタ

Aspose.PDF for .NET の Html5 PDF エディタとは？

Aspose.PDF for .NET の HTML5 PDF エディタは、ユーザーがオンラインで PDF ファイルを作成、編集、変換できるオープンソースのウェブベースの PDF エディタです。ユーザーは、自分のウェブアプリケーションにエディタを簡単に埋め込んで PDF ファイルを表示および編集できます。HTML5 PDF エディタは、HTML5、jQuery Ajax、ASP.NET、Bootstrap を使用して開発されており、バックエンドは Aspose.PDF for .NET によって支えられています。エディタの UI は、ユーザーの要件に応じて機能を簡単に理解し、強化できるように非常にシンプルに保たれています。

機能

以下の機能をサポートしています：

新しい PDF ファイルの作成。
PDF ファイルの読み込みと表示。
Dropbox からの PDF および画像ファイルの読み込み。
PDF ファイルを異なるファイル形式にエクスポート。
PDF ファイルの追加またはマージ。
新しいページの挿入。
ページの削除。
PDF ファイル内のページの移動。
PDF にテキストを挿入。
PDF 内のテキストをハイライト。
PDF 内に挿入したテキストを回転。
PDF 内のテキストを検索。
PDF 内のテキストを置き換え。
画像の挿入。
署名と画像のサイズ変更。
挿入されたアイテムのドラッグおよび配置。
フォームフィールドを含む PDF ファイルの読み込み。
エディタを使用してフォームフィールドに入力。
フォームフィールドデータを含む PDF を保存およびエクスポート。
必要なフォームフィールドのハイライト。
PDF ファイルに添付ファイルを追加。
入力 PDF ファイルから添付ファイルを読み込む。
添付ファイルをダウンロード。
添付ファイルを削除。
自由な手描きで PDF に署名。

システム要件

HTML5 PDF エディタは、ASP.NET、C#、HTML5、jQuery、Javascript を使用して開発された .NET Web アプリケーションです。HTML5 PDF エディタをセットアップするには、以下のシステム環境が必要です。

Visual Studio 2010（またはそれ以降）。
.NET Framework 3.5（またはそれ以降）。
Aspose.PDF for .NET。
jQuery 2.0.3。
Bootstrap 3.2.0。

以下のブラウザのいずれかを使用して、アプリケーションを実行できます：

Mozilla Firefox（推奨）。
Internet Explorer（バージョン 9 以降）。
Google Chrome。
Apple Safari。

サポート

私たち Aspose では、技術的または販売に関するあらゆる種類の質問に対して、顧客/ユーザーに可能な限り最高のサポートを提供することを確実にしています。ライセンスおよび販売関連または技術的な質問については、以下のリンクを使用してください。

PDF エディタ開発者ガイド

新しい PDF ファイルの作成

既存の PDF ドキュメントを編集するだけでなく、Html5 PDF エディタは、メニューバーの「新しいファイルを作成」オプションを使用して、ゼロから新しい PDF ファイルを作成することもサポートしています。この機能を使用すると、エディタで空白の PDF を作成し、テキストや画像を追加して、希望の形式で保存できます。次のセクションでは、この機能の背後にある技術的な詳細について説明します。

HTML - ページで「新しいファイルを作成」メニュー項目がクリックされました

「新しいファイルを作成」メニュー項目をクリックすると、Editor.js ファイル内の onNewFileClicked メソッドが呼び出されます。

jQuery - CreateNewFile メソッドのためにサーバーに Ajax リクエストを送信

Editor.js タブの下にある onNewFileClicked メソッドのソースコードを参照してください。これは、CanvasSave.aspx.cs ファイル内の CreateNewFile メソッドを呼び出します。

ASP.NET ウェブメソッドがサーバーリクエストを処理

Canvas.aspx.cs タブの下にある CreateNewFile メソッドのソースコードを参照してください。これは、ResetData メソッドを使用して、以前に読み込まれたファイルに関する既存のデータをクリアします。

Aspose.PDF for .NET を使用した新しい PDF ファイルの作成

ResetData メソッドを使用してデータをクリアした後、CreateNewFile メソッドは、Aspose.PDF for .NET の Document クラスを使用して新しい PDF ファイルを作成します。以下のタブに示すように、Document オブジェクトは空のページを持つファイルを生成しています。ファイルがサーバーで生成された後、ファイルは ImageConverter メソッドを使用して画像に変換され、キャンバスに読み込まれます。

結果ファイルをキャンバスに読み込む

ファイルがサーバー側で画像に変換された後、制御は Editor.js の onNewFileClicked メソッドに戻ります。onNewFileClicked メソッドは、すべてのクライアント側のコレクションをリセットし、resetData メソッドを使用して生成された画像ファイルをキャンバスに読み込みます。

PDF を異なるファイル形式にエクスポート

HTML5 PDF エディタは、メニューバーの「ファイルをエクスポート」オプションを使用して、PDF ファイルを異なるファイル形式にエクスポートすることをサポートしています。この機能を使用すると、PDF ファイルを希望の形式にエクスポートできます。次のセクションでは、この機能の背後にある技術的な詳細について説明します。

HTML - ページで「ファイルをエクスポート」メニュー項目がクリックされました

「ファイルをエクスポート」メニュー項目をクリックすると、リストからエクスポート形式を選択できます。エクスポート形式を選択した後、Editor.js ファイル内の「ExportFile」メソッドが呼び出されます。

jQuery - btnFileExport_Click メソッドのためにサーバーに Ajax リクエストを送信

Editor.js タブの下にある「ExportFile」メソッドのソースコードを参照してください。これは、CanvasSave.aspx.cs ファイル内のファイル形式パラメータを持つサーバーメソッド btnFileExport_Click へのリクエストを送信します。

ASP.NET ウェブメソッドがサーバーリクエストを処理

Canvas.aspx.cs タブの下を参照してください。btnFileExport_Click に渡されたファイル形式パラメータに基づいて、PDF ファイルは Aspose.PDF Document オブジェクトの Save メソッドを使用して変換されます。

クライアントブラウザにダウンロード用のファイルをエクスポート

ファイルがサーバーで生成された後、制御は Editor.js の ExportFile メソッドに戻り、ExportToBrowser メソッドを使用してユーザーがダウンロードできるようにファイルがブラウザに送信されます。

PDF ファイルの追加またはマージ

Html5 PDF エディタは、メニューバーの「ファイルを追加」オプションを使用して PDF ファイルの追加またはマージをサポートしています。この機能を使用すると、入力ファイルに PDF ファイルを追加できます。次のセクションでは、この機能の背後にある技術的な詳細について説明します。

HTML - ページで「ファイルを追加」メニュー項目がクリックされました

「ファイルを追加」メニュー項目をクリックすると、ファイルアップロードダイアログを使用してファイルをアップロードできます。ファイルがアップロードされると、Editor.js ファイル内の「fileSelected」メソッドが呼び出されます。

jQuery - ProcessRequest メソッドのためにサーバーリクエストを送信

Editor.js タブの下にある「fileSelected」メソッドのソースコードを参照してください。ファイルがサーバーに投稿され、「ProcessRequest」メソッドが CanvasSave.aspx.cs ファイル内で呼び出されます。

ASP.NET ウェブメソッドがサーバーリクエストを処理

Canvas.aspx.cs タブの下を参照してください。渡されたフォームパラメータに基づいて、追加されるファイルがサーバーに保存され、「AppendFile」メソッドが呼び出されます。AppendFile メソッドは、Aspose.PDF for .NET を使用してアップロードされたファイルを追加し、結果ファイルを画像に変換して制御を Editor.js の「fileSelected」メソッドに戻します。

ファイルを追加した後のキャンバスコンテンツの更新

ファイルがサーバーで生成された後、制御は Editor.js の「fileSelected」メソッドに戻り、エディタの内容を更新します。

ローカル PDF ファイルのアップロード

HTML5 PDF エディタは、メニューバーの「コンピュータから開く」オプションを使用してローカルマシンから PDF ファイルをアップロードすることをサポートしています。この機能を使用すると、既存の PDF ファイルを開いて編集を行うことができます。次のセクションでは、この機能の背後にある技術的な詳細について説明します。

HTML - ページで「コンピュータから開く」メニュー項目がクリックされました

「コンピュータから開く」メニュー項目をクリックすると、ファイルアップロードダイアログを使用して入力ファイルをアップロードできます。ファイルがアップロードされると、Editor.js ファイル内の「fileSelected」メソッドが呼び出されます。

jQuery - ProcessRequest メソッドのためにサーバーリクエストを送信

ASP.NET ウェブメソッドがサーバーリクエストを処理

Canvas.aspx.cs タブの下を参照してください。渡されたフォームパラメータに基づいて、アップロードされるファイルがサーバーに保存され、「ResetData」メソッドを使用してデータをリセットし、「ImageConverter」メソッドが呼び出されます。ImageConverter メソッドは、Aspose.PDF for .NET を使用してアップロードされたファイルを画像に変換し、制御を Editor.js の「fileSelected」メソッドに戻します。

ファイルをアップロードした後のキャンバスコンテンツの更新

ファイルがサーバーで生成された後、制御は Editor.js の「fileSelected」メソッドに戻り、エディタの内容を更新します。つまり、キャンバスをリセットし、新しくアップロードされたファイルを読み込みます。

PDF ファイルにページを追加

Html5 PDF エディタを使用すると、メニューバーの「ページを追加」オプションを使用して PDF ファイルに新しいページを追加できます。この機能を使用すると、PDF ファイルに空白のページを追加できます。次のセクションでは、この機能の背後にある技術的な詳細について説明します。

HTML - ページで「ページを追加」メニュー項目がクリックされました

「ページを追加」メニュー項目をクリックすると、Editor.js ファイル内の「AddPage」メソッドが呼び出されます。

jQuery - AddPage_Click メソッドのためにサーバーに Ajax リクエストを送信

Editor.js タブの下にある AddPage メソッドのソースコードを参照してください。これは、CanvasSave.aspx.cs ファイル内の AddPage_Click メソッドを呼び出します。

ASP.NET ウェブメソッドがサーバーリクエストを処理

Canvas.aspx.cs タブの下を参照してください。AddPage_Click メソッドのソースコードを参照してください。これは、Aspose.Pdf.Document クラスを使用して PDF ファイルに新しい空白のページを追加します。ページが PDF ファイルに追加された後、ページはエディタに表示されるために画像に変換されます。制御はその後 Editor.js ファイルに戻り、AddPage メソッドでページ番号を更新します。

PDF ファイルからページを削除

Html5 PDF エディタを使用すると、メニューバーの「ページを削除」オプションを使用して PDF ファイルからページを削除できます。次のセクションでは、この機能の背後にある技術的な詳細について説明します。

HTML - ページで「ページを削除」メニュー項目がクリックされました

「ページを削除」メニュー項目をクリックすると、Editor.js ファイル内の DeletePage メソッドが呼び出されます。

jQuery - DeletePage_Click メソッドのためにサーバーに Ajax リクエストを送信

Editor.js タブの下にある DeletePage メソッドのソースコードを参照してください。これは、CanvasSave.aspx.cs ファイル内の DeletePage_Click メソッドを呼び出します。

ASP.NET ウェブメソッドがサーバーリクエストを処理

Canvas.aspx.cs タブの下を参照してください。DeletePage_Click メソッドのソースコードを参照してください。これは、Aspose.Pdf.Document.Page コレクションの Delete メソッドを使用して PDF ファイルから選択したページを削除します。

編集内容の更新

PDF ファイルからページを削除した後、制御はその後 Editor.js ファイルの DeletePage メソッドに戻り、ページ番号を更新し、updateIndexesDelete メソッドを使用して削除されたページに関連するコレクションを削除します。

PDF ファイル内のページを移動

Html5 PDF エディタを使用すると、メニューバーの「ページを移動」オプションを使用して PDF ファイル内のページを移動できます。「ページを移動」メニュー項目を押すと、選択したページの新しい位置を指定するための入力ダイアログが表示されます。次のセクションでは、この機能の背後にある技術的な詳細について説明します。

HTML - ページで「ページを移動」メニュー項目がクリックされました

「ページを移動」メニュー項目をクリックすると、選択したページの新しい位置を取得するための入力ダイアログが表示されます。ページ番号を提供し、「移動」ボタンを押すと、Editor.js ファイル内の「Move」メソッドが呼び出されます。

jQuery - MovePages メソッドのためにサーバーに Ajax リクエストを送信

Editor.js タブの下にある Move メソッドのソースコードを参照してください。これは MovePage メソッドを呼び出し、移動元、移動先、ページリストなどの詳細を CanvasSave.aspx.cs ファイルの MovePages メソッドに渡します。

ASP.NET ウェブメソッドがサーバーリクエストを処理

Canvas.aspx.cs タブの下を参照してください。MovePages メソッドのソースコードを参照してください。これは、Aspose.Pdf.Document.Pages コレクションを使用してページを移動します。

編集内容の更新

ページを移動した後、制御はその後 Editor.js ファイルの MovePage メソッドに戻り、ページインデックスとエディタ内のさまざまなコレクションに関連する情報を MoveUpdate メソッドを使用して更新します。

PDF ファイルにテキストを挿入

Html5 PDF エディタを使用すると、メニューバーの「テキストモード」オプションを使用して PDF ファイルにテキストを挿入できます。「テキストモード」メニュー項目を選択し、テキストを追加したいエディタ内の任意の位置をクリックすると、挿入するテキストを入力してフォーマットするための入力ダイアログが表示されます。

次のセクションでは、この機能の背後にある技術的な詳細について説明します。

HTML - ページで「テキストモード」メニュー項目が選択されました

「テキストモード」メニュー項目を選択し、PDF ファイルにテキストを挿入するためにエディタ内の希望の位置をクリックすると、ページに挿入する必要があるテキストを取得するための入力ダイアログが表示されます。テキストを提供し、「OK」ボタンを押すと、Editor.js ファイル内の「saveTextFromArea」メソッドが呼び出されます。

Javascript - 入力ダイアログから入力テキストを取得し、エディタに表示

Editor.js タブの下にある saveTextFromArea メソッドのソースコードを参照してください。これは、入力ダイアログからテキストを取得し、エディタに表示します。また、サーバー側で PDF ファイルにテキストを挿入するために後で使用される shapes コレクションにデータを保存します。ファイルが保存されるときに呼び出される saveFile メソッドのソースコードを確認できます。

ASP.NET ウェブメソッドがサーバーリクエストを処理

上記のように、テキストは実際には保存操作を行うときに私たちのソース PDF ファイルに挿入されます。この操作は、PDF ファイルに挿入するためのテキストスタンプを作成するために GetTextStamp メソッドを使用します。Canvas.aspx.cs タブの下にある GetTextStamp メソッドのソースコードを参照してください。これは、Aspose.Pdf.TextStamp クラスを使用して PDF ファイルにテキストを挿入します。

PDF ファイル内のテキストをハイライト

Html5 PDF エディタを使用すると、メニューバーの「ハイライトモード」オプションを使用して PDF ファイル内のテキストをハイライトできます。「ハイライトモード」メニュー項目を選択すると、矩形のハイライトツールを使用して任意のテキストや領域をハイライトできます。次のセクションでは、この機能の背後にある技術的な詳細について説明します。

HTML - ページで「ハイライトモード」メニュー項目が選択されました

「ハイライトモード」メニュー項目を選択すると、PDF ファイル内の任意のテキストやアイテムの周りに矩形のハイライトを描画できます。このプロセスの実装は、Editor.js ファイル内の「tools.rect」メソッドで確認できます。

Javascript - エディタにハイライト矩形を描画

Editor.js タブの下にある tool.rect メソッドのソースコードを参照してください。これは、ユーザーがエディタの任意の位置にハイライト矩形を描画できるようにします。また、サーバー側でソース PDF ファイルにハイライトを挿入するために後で使用される shapes コレクションにデータを保存します。ファイルが保存されるときに呼び出される saveFile メソッドのソースコードを確認できます。

ASP.NET ウェブメソッドがサーバーリクエストを処理

上記のように、ハイライトは実際には保存操作を行うときに私たちのソース PDF ファイルに挿入されます。この操作は、エディタで指定された位置にソース PDF ファイルに画像スタンプを挿入するために GetImageStamp メソッドを使用します。Canvas.aspx.cs タブの下にある GetImageStamp メソッドのソースコードを参照してください。これは、Aspose.Pdf.ImageStamp クラスを使用して PDF ファイルにハイライト矩形を挿入します。

PDF ファイル内のテキストを検索

Html5 PDF エディタを使用すると、メニューバーの「テキストを検索」オプションを使用して PDF ファイル内のテキストを検索できます。「テキストを検索」メニュー項目をクリックすると、検索するテキストを入力するためのダイアログボックスが表示されます。

テキストを提供し、検索ボタンを押すと、検索された単語のすべてのインスタンスがハイライトされます。

HTML - ページで「テキストを検索」メニュー項目がクリックされました

「テキストを検索」メニュー項目をクリックすると、検索したいテキストを入力するためのダイアログが表示されます。テキストを入力し、検索ボタンを押すと、「Move」メソッドが呼び出され、ページ移動操作が実行されたか、検索操作が実行されたかを確認し、その後 Editor.js ファイル内の performSearch メソッドが呼び出されます。

jQuery - SearchData メソッドのためにサーバーに Ajax リクエストを送信

Editor.js タブの下にある performSearch メソッドのソースコードを参照してください。これは、入力テキストを取得し、サーバーメソッド SearchData へのリクエストを送信します CanvasSave.aspx.cs ファイル内。

ASP.NET ウェブメソッドがサーバーリクエストを処理

Canvas.aspx.cs タブの下を参照してください。performSearch メソッドから渡された入力テキストを使用して、SearchData メソッドは Aspose.Pdf.Text.TextFragmentAbsorber クラスを使用して、ソース PDF ファイル内の入力テキストのすべてのインスタンスを検索し、System.Drawing.Brush クラスを使用して検索されたテキストに対してハイライトを描画します。データが検索されると、結果ファイルは再び画像に変換され、エディタに読み込まれます。

PDF ファイル内のテキストを置き換え

Html5 PDF エディタを使用すると、メニューバーの「テキストを置き換え」オプションを使用して PDF ファイル内の既存のテキストを置き換えることができます。「テキストを置き換え」メニュー項目をクリックすると、検索して置き換えるテキストを入力するためのダイアログボックスが表示されます。

HTML - ページで「テキストを置き換え」メニュー項目がクリックされました

「テキストを置き換え」メニュー項目をクリックすると、検索して置き換えるテキストを入力するためのダイアログが表示されます。テキストを入力し、「置き換え」ボタンを押すと、Editor.js ファイル内の「ReplaceText」メソッドが呼び出されます。

jQuery - ReplaceText メソッドのためにサーバーに Ajax リクエストを送信

Editor.js タブの下にある ReplaceText メソッドのソースコードを参照してください。これは、入力テキストダイアログから入力テキストを取得し、CanvasSave.aspx.cs ファイル内のサーバーメソッド ReplaceText へのリクエストを送信します。

ASP.NET ウェブメソッドがサーバーリクエストを処理

Canvas.aspx.cs タブの下を参照してください。ReplaceText メソッドは、Aspose.Pdf.Text.TextFragmentAbsorber クラスを使用して、ソース PDF ファイル内の置き換えるテキストのすべてのインスタンスを検索し、すべてのインスタンスを置き換えたテキストで置き換えます。テキストが置き換えられると、結果ファイルは再び画像に変換され、エディタに読み込まれます。

フォームフィールドを含む PDF ファイルの読み込み

Html5 PDF エディタを使用すると、フォームフィールドを含む PDF ファイルを読み込んで作業できます。フォームフィールドを含むファイルがエディタに読み込まれると、すべてのフォームフィールドが編集のために読み込まれます。次のセクションでは、この機能の背後にある技術的な詳細について説明します。

HTML - ページで「コンピュータから開く」メニュー項目がクリックされました

「コンピュータから開く」メニュー項目をクリックすると、ファイルアップロードダイアログを使用してフォームフィールドを含む入力ファイルをアップロードできます。ファイルがアップロードされると、Editor.js ファイル内の「fileSelected」メソッドが呼び出されます。

jQuery - ProcessRequest メソッドのためにサーバーリクエストを送信

ファイルがサーバーに投稿され、「ProcessRequest」メソッドが CanvasSave.aspx.cs ファイル内で呼び出されます。

ASP.NET ウェブメソッドがサーバーリクエストを処理

Canvas.aspx.cs タブの下を参照してください。渡されたフォームパラメータに基づいて、アップロードされるファイルがサーバーに保存され、ImageConverter メソッドが呼び出され、アップロードされたファイルを画像に変換し、「CheckFields」メソッドが呼び出されます。このメソッドは、Aspose.Pdf.InteractiveFeatures.Forms クラスを使用してすべてのフォームフィールドをチェックし、フィールドに関する情報（フィールドタイプ、位置など）を収集し、フィールドのコレクションを ImageConverter メソッドに戻します。ImageConverter メソッドは、制御を Editor.js の「fileSelected」メソッドに戻します。

キャンバス上のフォームフィールドの読み込み

必要なフォームフィールドのハイライト

Html5 PDF エディタを使用すると、エディタ内で必要なフォームフィールドをハイライトできます。フォームフィールドを含むファイルがエディタに読み込まれると、すべての必要なフォームフィールドがユーザーが編集を支援するためにハイライトされます。次のセクションでは、この機能の背後にある技術的な詳細について説明します。

HTML - ページで「コンピュータから開く」メニュー項目がクリックされました

jQuery - ProcessRequest メソッドのためにサーバーリクエストを送信

ファイルがサーバーに投稿され、「ProcessRequest」メソッドが CanvasSave.aspx.cs ファイル内で呼び出されます。

ASP.NET ウェブメソッドがサーバーリクエストを処理

Canvas.aspx.cs タブの下を参照してください。渡されたフォームパラメータに基づいて、アップロードされるファイルがサーバーに保存され、ImageConverter メソッドが呼び出され、アップロードされたファイルを画像に変換し、「CheckFields」メソッドが呼び出されます。このメソッドは、Aspose.Pdf.InteractiveFeatures.Forms クラスを使用してすべてのフォームフィールドをチェックし、フィールドに関する情報（フィールドタイプ、位置など）を収集します。すべてのフォームフィールドの詳細を取得した後、Aspose.Pdf.Facades.IsRequiredField メソッドを使用して、フォームフィールドが必要なフィールドかどうかの情報を取得し、フィールドのコレクションを ImageConverter メソッドに戻します。ImageConverter メソッドは、制御を Editor.js の「fileSelected」メソッドに戻します。

キャンバス上のフォームフィールドの読み込み

Editor.js タブの下を参照してください。Editor.js の manageFields メソッドは、サーバー側から送信された情報に基づいてキャンバス上のすべてのフィールドを生成するために使用されます。サーバー側からのタイプと位置情報を使用して、キャンバス上に HTML フィールドコントロールを描画します。特定のフィールドが必要な場合は、コントロールの周りに div（ラッパーと呼ばれる）を使用し、背景色プロパティを変更して、ハイライトされた必要なフィールドとして表示します。

WebForms DataGridViewをPDFにレンダリング