Aspose.PDF Editor

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は、ユーザーの要求に応じて機能を簡単に理解し拡張するために非常にシンプルに保たれています。

Image

機能

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

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

System Requirements

HTML5 PDF Editorは.NET Webアプリケーションで、ASP.NET, C#, HTML5, jQuery, Javascriptを使用して開発されています。HTML5 PDF Editorを設定するためには、以下のシステム環境が必要です。

  • Visual Studio 2010（またはそれ以上）
  • .NET Framework 3.5（またはそれ以上）
  • Aspose.PDF for .NET
  • 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 - サーバーへのAjaxリクエストを送信します。

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

ASP.NET Webメソッドがサーバーリクエストを処理する

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

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

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

キャンバスへの結果ファイルのロード。

ファイルがサーバーサイドで画像に変換された後、制御はEditor.jsのonNewFileClickedメソッドに戻されます。 サーバー側でファイルが画像に変換された後、制御はEditor.jsのonNewFileClickedメソッドに戻されます。

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

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

どのように機能するか？

HTML - ページ上で「ファイルをエクスポート」メニューアイテムがクリックされます。

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

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

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

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

以下のCanvas.aspx.csタブを参照してください。 クライアントブラウザにダウンロードするためのファイルをエクスポート

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

PDFファイルの追加または結合

Html5 PDF EditorはPDFファイルの追加または結合をサポートしており、メニューバーから「ファイルを追加」オプションを使用して行うことができます。この機能を使用すると、PDFファイルを入力ファイルに追加できます。次のセクションでは、この機能の背後にある技術的な詳細について説明します。

どのように機能するか？

HTML - ページ上で「ファイルを追加」メニューアイテムがクリックされました。

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

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

以下のEditor.jsタブを参照して、「fileSelected」メソッドのソースコードを確認してください。 ASP.NET Webメソッドはサーバー要求を処理します

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

ファイルを追加した後のキャンバス内容を更新する

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

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

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

どのように動作するか？

HTML - ページ上で「コンピューターから開く」メニューアイテムがクリックされます。 HTML - “コンピュータから開く” メニューアイテムがクリックされた時

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

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

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

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

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

ファイルのアップロード後にキャンバスの内容を更新

ファイルがサーバーで生成された後、制御が Editor.js の “fileSeleceted” メソッドに戻され、エディタの内容が更新されます。

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

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

仕組みは？

HTML - ページ上で「ページを追加」メニューアイテムがクリックされた

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

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

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

ASP.NET webメソッドがサーバーリクエストを処理します

Canvas.aspx.csタブの下にあるAddPage_Clickメソッドのソースコードを参照してください。

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

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

仕組みは？

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

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

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

Editor.jsタブの下でDeletePageメソッドのソースコードを見てください。それはCanvasSave.aspx.csファイルのDeletePage_Clickメソッドを呼び出します。

ASP.NET webメソッドがサーバーリクエストを処理します

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

編集内容の更新

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

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

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

仕組みは？

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

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

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

以下のEditor.jsタブには、MovePageメソッドを呼び出し、移動元、移動先、ページリストの詳細をCanvasSave.aspx.csファイルのMovePagesメソッドに渡すMoveメソッドのソースコードが記載されています。 ASP.NET Webメソッドがサーバー要求を処理

Canvas.aspx.csタブのMovePagesメソッドのソースコードを以下に示します。このメソッドはAspose.PDF.Document.Pagesコレクションを使用してページを移動します。

編集内容を更新

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

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

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

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

仕組みは？

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

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

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

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

ASP.NET webメソッドがサーバーリクエストを処理します

上記のように、GetTextStampメソッドを使用してPDFファイルにテキストスタンプを挿入する保存操作を実行すると、実際にソースPDFファイルにテキストが挿入されます。 上記のように、GetTextStampメソッドを使用してPDFファイルにテキストスタンプを挿入する保存操作を実行すると、テキストがソースPDFファイルに挿入されます。

PDFファイルでテキストをハイライトする

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

どのように機能するか？

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

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

Javascript - エディター上でハイライト矩形を描画します。

以下のEditor.jsタブに、エディター上の任意の位置にハイライト矩形を描画するためのtool.rectメソッドのソースコードを参照してください。 Editor.jsタブを以下に示し、ツールのrectメソッドのソースコードを確認してください。これにより、ユーザーはエディター上の任意の場所にハイライト用の四角を描画できます。

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

上記のように、ハイライトは実際には保存操作を行うときにソースPDFファイルに挿入されます。これはGetImageStampメソッドを使用して、エディター上で指定された位置にソースPDFファイルにイメージスタンプを挿入します。以下のCanvas.aspx.csタブにGetImageStampメソッドのソースコードを示します。これはAspose.PDF.ImageStampクラスを使用してPDFファイルにハイライト四角を挿入します。

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

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

テキストを提供して検索を押すと、検索された単語のすべてのインスタンスが以下に示すようにハイライトされます:

どのように機能しますか？

HTML - “テキスト検索"メニュー項目がページ上でクリックされます HTML - “テキスト検索” メニューアイテムがクリックされたとき

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

jQuery - Ajax サーバーリクエストを送信する SearchData メソッド

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

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

下記の Canvas.aspx.cs タブを参照してください。 Canvas.aspx.cs タブを下にご覧ください。

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

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

どのように機能しますか？

HTML - 「テキスト置換」メニューアイテムがページ上でクリックされる

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

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

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

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

Canvas.aspx.cs タブを下にご覧ください。

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

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

どのように動作するか？

HTML - ページ上で「コンピューターから開く」メニューアイテムがクリックされたとき。

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

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

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

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

See Canvas.aspx.cs tab below. Canvas.aspx.cs タブを参照してください。

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

Editor.js タブを参照してください。Editor.js の manageFields メソッドは、サーバーサイドから送られてくる情報に基づいてキャンバス上にすべてのフィールドを生成するために使用されます。サーバーサイドからのタイプと位置情報を使用して、キャンバスに HTML フィールドコントロールを描画します。

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

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

仕組みは？

HTML - “コンピューターから開く” メニューアイテムがページ上でクリックされます。

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

jQuery - ProcessRequest メソッドのためのサーバーリクエストを送信します jQuery - サーバーリクエストを送信して、ProcessRequestメソッドを実行

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

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

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

キャンバス上のフォームフィールドをロード

以下のEditor.jsタブを参照してください。Editor.jsのmanageFieldsメソッドは、サーバーサイドから送られてきた情報に基づいて、キャンバス上にすべてのフィールドを生成するために使用されます。 Editor.jsタブをご覧ください。Editor.jsのmanageFieldsメソッドは、サーバーサイドから送り返された情報に基づいてキャンバス上のすべてのフィールドを生成するために使用されます。

WebForms DataGridViewをPDFにレンダリング