JavaScript PDF ビューアに注釈、編集、フォームエディターツールを追加する方法

より多くの Web 環境に移行するにつれて、 の機能もブラウザーに移行するのは当然のことです。ただし、多くの場合、ユーザーは PDF ドキュメントを表示する以上の操作を行う必要があります。 ビジネス アプリケーションが ドキュメントの共有や編集など 追加情報を提供するために注釈を追加したり、ドキュメントから個人情報を削除したり、ドキュメント内のフォーム フィールドに入力したりする必要があるかもしれません。幸いなことに、 、この機能を アプリケーションに簡単に追加できます。 Document Solutions JavaScript PDF Viewer を使用すると JavaScript この記事では、Document Solutions JavaScript PDF Viewer の次の機能について説明します。 JavaScript PDF ビューアの注釈エディタ 注釈の主な機能 PDF からコンテンツを編集する JavaScript PDF ビューア用フォーム エディター フォームエディターの主な機能 PDF ビューアの追加編集オプション それでは、これらの機能を見てみましょう。 JavaScript PDF ビューアの注釈エディタ Document Solutions JavaScript PDF Viewer の注釈ツールは、PDF ドキュメント内の重要な情報を確認してマークするのに役立ちます。また、元のコンテンツを保持しながら、既存の PDF ドキュメントに注釈を追加、変更、削除することもできます。 ユーザーは PDF に注釈を付けたり、コメントしたり、お互いのコメントに返信したりできます。注釈を非表示にする機能により、ユーザーは元のドキュメントを簡単に表示および印刷できます。また、必要に応じて注釈を含むコピーを印刷することもできます。 ドキュメント内のすべての注釈が一覧表示され、既存の注釈にアクセスして変更できます。 注釈エディターには 使用例とメリット 通常、ユーザーは PDF に注釈を付ける際に を使用します。編集機能を備えたビューアを使用すると、ユーザーはアプリケーション間を行き来することなく、アプリケーション内で直接ドキュメントに注釈を付けることができます。ご覧のとおり、編集機能を備えたビューアは、ビジネスのワークフローを大幅に効率化できます。 Adobe Acrobat この機能が役立つ例をいくつか挙げます。 会社の従業員は 経営陣に送って確認してもらいたいと考えています。経営陣は、レポートを PDF ビューアーでオンラインで開き、注釈を使用して変更を提案し、コメントが付けられたことを従業員に知らせることができます。従業員は、オンライン エディターでドキュメントを開き、付けた注釈を使用してビューアーで更新できます。 、財務レポートを 従業員が会社の給与体系に疑問を抱いています。従業員は PDF ビューアーで文書を読み、機密情報を編集し、注釈ツールを使用して説明が必要な箇所にマークを付けることができます。 ウェブサイトのスクリーンショットを準備し、それらを PDF にまとめてレビューに送信します。レビュー担当者は、注釈ツールを使用して、変更が必要な領域にマークを付けます。 ウェブサイト デザイナーは、 Document Solutions JavaScript PDF Viewer の注釈ツールを使用すると、これらすべてのシナリオが可能になります。注釈に含まれる機能を調べてみましょう。 注釈の主な機能 注釈では次の主な機能が利用できます。 さまざまな注釈を付けてPDFを編集する ユーザーフレンドリーなUIで重要な情報をマークする 新規および既存の PDF に注釈を追加、変更、削除する PDF コンテンツを強化し、注釈固有のプロパティを適用する 元のPDFを変更せずに印刷する 注釈付きの修正されたPDFをクライアントに保存する さまざまな注釈を付けてPDFを編集する Document Solutions PDF ビューアは、PDF ドキュメントを確認するために必要なすべての注釈をサポートしています。次の注釈を追加できます。 テキスト注釈（付箋） - PDFにテキストまたは付箋を追加します フリーテキスト注釈 - PDFに常に表示されるメモを追加します インク注釈 - PDFにフリーハンドで落書きを描きます 四角形注釈 - PDFに長方形/正方形を追加します 円形注釈 - PDFに円形を追加します 線注釈 - PDFに直線を追加します ポリライン注釈 - PDF に複数のエッジを持つ閉じた図形または開いた図形を追加します。 ポリゴン注釈 - PDFにポリゴンを追加します ファイル添付注釈 - ドキュメントにファイルを添付し、PDFに埋め込みます。 サウンド注釈 - ファイルからインポートしたサウンド、またはコンピューターのマイクから録音したサウンド (.au、.aiff、または .wav 形式) を追加します。 リンク注釈 - さまざまなウェブページにリンクしたり、検索エンジンを呼び出したり、JavaScript を実行したりできるリンクを追加します。 スタンプ注釈 - ローカルまたはサーバー上の画像をPDFの注釈として使用します ユーザーフレンドリーなUIで重要な情報をマークする Document Solutions PDF Viewer 注釈ツールには、ユーザーが PDF に注釈を描画できる直感的な UI があります。PDF Viewer には、注釈の追加、注釈のプロパティの変更、既存の PDF からの注釈の削除を行うための個別の が含まれています。 注釈ツールバーとエディター には、ドキュメント内の注釈のリストが表示されます。PDF 上の任意の注釈を選択したり、左側のパネルから注釈固有のプロパティを適用したり、注釈を削除したりできます。 プロパティ パネル パネルの タブでは、ページに存在する注釈の数を確認できます。ドキュメントをレビュー用に送信するときに、行われた編集の数を確認できます。 「ページ」 新規および既存の PDF に注釈を追加、変更、削除する JavaScript PDF ビューアで PDF を確認しているときに、いつでも既存の注釈を編集したり削除したりできます。注釈を追加するには、左側のパネルの注釈エディタ ボタンをクリックすると、 が表示されます。任意の注釈をクリックし、PDF に直接描画します。注釈を選択すると、左側のパネルに注釈のプロパティが表示されます。既存の注釈を含む PDF をロードしたり、注釈を選択したり、プロパティを変更したり、プロパティ パネルから注釈を削除したりすることもできます。 注釈ツールバー PDF コンテンツを強化し、注釈固有のプロパティを適用する ビューアでは、注釈固有のプロパティを設定するための広範なサポートが提供されます。プロパティ パネルから、リッチ テキストの追加、テキストの色の設定、境界線の追加、作成者と件名の設定、返信の追加、注釈の境界/X/Y 位置の設定などを行うことができます。 PDFを変更せずに印刷する 元の PDF を表示する場合は、 ボタンを使用して注釈を非表示にし、注釈なしで PDF を印刷できます。 [非表示] 注釈付きの変更されたPDFをクライアントに保存する 保存ボタンをクリックして、PDF に変更を適用し、注釈を保存します。変更を保存するには、ビューアを を実行しているサーバーに接続する必要があります。変更のリストと元の PDF がサーバーに送信され、DsPdf によって変更が適用されます。その後、変更された PDF がクライアントに返送され、ユーザーはそれを保存できます。 DsPdf PDF からコンテンツを編集する ツールバーの または オプションを使用すると、機密セクションを削除対象としてマークできます。「境界線の色をマーク」および「塗りつぶしの色をマーク」を設定して、ユーザーが編集対象領域をマークできるようにします。ユーザーは、編集されたコンテンツにマウスを移動したときに適用されるこれらのプロパティ（ 、 、 、および を設定できます。これらのオプションはすべて、コンテンツがドキュメントから削除されると PDF に表示されます。 「注釈を編集」 「領域を編集」 オーバーレイの塗りつぶしの色 オーバーレイ テキスト オーバーレイ テキストの配置 繰り返しテキスト） プロパティ パネルの ボタンから特定のコンテンツを編集することもできます。編集を適用したら、ツールバーの [編集をリセット] ボタンを使用してリセットできます。ただし、PDF を保存すると、編集された情報にアクセスできなくなり、適用された編集をリセットできなくなります。 [編集を適用] 個別の編集注釈を適用するか、 ボタンをクリックしてドキュメント全体に編集を適用することができます。編集を適用した PDF を保存すると、編集されたコンテンツは PDF から完全に削除されます。ユーザーは削除されたコンテンツを選択または別のドキュメントにコピーしたり、他の PDF ツールを使用して編集されたコンテンツを読むことはできません。 [すべての編集を適用] JavaScript PDF ビューア用フォーム エディター フォーム エディターを使用すると、 オンラインで設計できます。エディターを使用すると、フォームを作成するときにさまざまなフォーム フィールドと高度なプロパティを使用できます。また もできます。 インタラクティブな PDF フォームを 、オンラインでフォームに入力して送信すること フォーム エディターの機能は次のとおりです。 新しいPDFフォームを最初から作成する PDFフォームのデザイン、入力、送信、リセット ユーザーから直接データを収集し、PDFフォームに入力します 外部ソース（データベース、 など）からフォーム フィールドにデータを入力します。 JSON 既存のPDF文書にフォームフィールドを追加する 既存のPDF文書のフォームフィールドを編集する PDFフォームにJavaScript機能を追加する フォームフィールドに幅広いプロパティを適用する PDF フォームを設計するための高速で直感的な UI ツールバーとプロパティ パネル を構築 - ツールバーの不要なフィールドを省略 カスタムUI Web ベースの PDF フォーム デザイナーの必要性 PDF 形式は、レイアウトと外観の点で最も好まれる形式です。そのため、 一般的であっても、PDF フォームは常に設計どおりの外観になります。 HTML フォームが ほとんどのアプリケーションは Web ベースですが、Document Solutions PDF Viewer は、PDF フォームの作成、PDF の編集、注釈の追加、変更した PDF をクライアントに保存するためのワンストップ オンライン ツールです。単一のアプリケーションで PDF を生成して保存するより高速な方法です。 開発者は Acrobat で PDF フォームを作成し、オンラインで共有できます。ただし、ブラウザのデフォルト ビューアで開かれた PDF はカスタマイズできず、開発者はフォーム上でコンテンツの送信やフォーム データによるコンテンツの入力などの追加の JavaScript アクションを使用することもできません。Document Solutions PDF Viewer は、送信アクションとリセット アクションを使用してフォーム上で設定できる追加の JavaScript アクションをサポートしています。 フォームを作成するには、 を使用することも、PDF エディターを使用することもできます。Word で PDF フォームを作成するのは、複雑な編集ツールが必要なため難しい場合があります。Document Solutions PDF Viewer フォーム デザイナーは直感的で、ユーザー フレンドリな UI と、フォーム フィールドに必要なプロパティを設定するプロパティ パネルが含まれています。 Microsoft Word 任意のブラウザで表示および入力できるように PDF フォームを設計できます。また、フォームの外観やエンド ユーザーが Adobe Acrobat を持っているかどうかを心配する必要もありません。 作成できるさまざまな種類の PDF フォーム フォーム デザイナーを使用して、次の PDF フォームを作成できます。 （例：イベント、大学のコース、会員、患者の履歴、コンテストなど） 登録フォーム 申請書（例：求人応募書、ローン申請書など） (例: イベント、Web サイト、e コマースなど) フィードバック フォーム リクエストフォーム（例：レンタル、情報、支払いフォームなど） PDFフォームデザイナーの主な機能 Document Solutions JavaScript PDF ビューアーは、PDF をインタラクティブかつ完全なものにするのに役立ついくつかの種類のフォーム フィールドをサポートしています。 テキスト フィールド - ユーザーが名前、電話番号などのテキストを入力できるようにします。 パスワードフィールド - ユーザーがドキュメントのパスワードを入力できるようにします テキスト エリア フィールド - 職歴、住所などの長い形式のテキストを追加できます。 チェックボックスフィールド - ユーザーが複数のオプションを選択できるようにします ComboText フィールド - 等間隔の位置にテキストを追加できます (たとえば、登録フォームに日付や電子メールなどを入力する場合) コンボボックスフィールド - ポップアップメニューから項目を選択したり、値を入力したりできます リストボックスフィールド - 選択オプションのリストを表示します プッシュボタン フィールド - 個々のファイルを開いたり、ポップアップ メッセージを表示したりするなど、特定のアクションをトリガーする対話型ボタン。 ラジオボタンフィールド - ユーザーが1つだけ選択できるオプションのグループを表示します。 送信ボタンフィールド - 入力したフォームを送信できます リセットボタンフィールド - フォームをリセットできます PDF フォームをデザインするためのユーザーフレンドリーな UI Document Solutions フォーム エディター ツールには、PDF にフォーム フィールドを追加するためのユーザー フレンドリな UI があります。PDF ビューアーには、フォーム フィールドを追加したり、プロパティを変更したり、既存の PDF からフォーム フィールドを削除したりするための、独立した が含まれています。 には、ドキュメント内のフォーム フィールドのリストが表示されます。PDF 上の任意のフォーム フィールドを選択し、左側のパネルからフォーム フィールド固有のプロパティを適用し、フォーム フィールドを削除できます。パネルの [ページ] タブでは、ページに存在するフォーム フィールドの数も確認できます。 フォーム フィールド ツールバーとエディター プロパティ パネル 新規または既存の PDF フォームからフォーム フィールドを追加、変更、削除する オンライン ビューアーで PDF フォームを設計しているときはいつでも、既存のフォーム フィールドを変更したり、削除したりできます。フォーム フィールドを追加するには、左側のパネルの ボタンをクリックすると、フォーム エディター ツールバーが表示されます。任意のフォーム フィールドをクリックし、PDF ページに直接描画します。フォーム フィールドを選択すると、左側のパネルにフォーム フィールドのプロパティが表示されます。既存のフォーム フィールドを含む PDF フォームをロードしたり、フォーム フィールドを選択してプロパティを適用したり、プロパティ パネルから オプションを選択してフォーム フィールドを削除したりすることもできます。 [フォーム エディター] [削除] フォームフィールド固有のプロパティを使用して PDF フォームを強化する ビューアでサポートされている各フォーム フィールドに対して、フォーム フィールド固有のプロパティを設定するための広範なサポートがあります。一般的な機能としては、名前、読み取り専用、値、配置、背景色、最大長、境界線のプロパティ、フォント サイズを設定したり、フォーム フィールドの境界/X/Y 位置を設定したりできます。 さらに、TextField、PasswordField、TextArea、ComboText Field などのテキスト フィールドに Required プロパティを設定することもできます。 オリジナルのPDFフォームを印刷する 元の PDF ファイルを表示する場合は、メイン ツールバーの ボタンを使用してフォーム フィールドを非表示にし、フォーム フィールドなしで PDF ファイルを表示または印刷できます。 [非表示] フォームフィールドを含む新しくデザインされたPDFをクライアントに保存する PDF ドキュメントに変更を適用し、 フィールドを保存します。この操作では、元の PDF と変更リストを取得し、変更を適用し、変更された PDF をクライアントに送り返すために、サーバー上に DsPdf 製品が必要です。 フォーム PDFフォームに記入して送信する PDF フォームを設計したら、ユーザーが PDF フォームに入力してビューアに送信できるようにすることができます。フォーム データは、データベースに送信されるか、入力された値から PDF として生成されます。また、データベースからビューアにフォーム データを PDF フォームにインポートすることもできます。 PDF ビューアの追加編集オプション 注釈、編集、フォーム フィールドに加えて、次の機能を使用して PDF ドキュメントを操作および編集できます。 空白のPDFドキュメントを作成する PDF ビューアを使用して、 ボタンで PDF ドキュメントを作成できます。 および ツールを使用して、PDF または PDF フォームを設計できます。 [新規ドキュメント] 注釈 フォーム エディター PDF ドキュメントに新しいページを追加したり、ページを削除したりする ボタンを使用して既存の PDF ドキュメントまたは元の PDF ドキュメントに新しいページを追加したり、 ボタンを使用してページを削除したりできます。 「新規ページ」 「削除」 PDF ドキュメントから注釈/フォーム フィールドを選択して削除する PDF ドキュメントに追加された注釈/フォーム フィールドは、注釈エディターおよびフォーム エディター ビューでいつでも選択できます。 ボタンを使用して、新規または既存の PDF ドキュメントから注釈またはフォーム フィールドを削除します。 [削除] 変更を元に戻す、やり直す 注釈またはフォーム フィールドへの変更を元に戻したりやり直したりする場合は、注釈エディターとフォーム エディターの両方で ボタンを使用できます。これらのボタンは変更を段階的に記録し、結果に満足するまで操作を元に戻したりやり直したりすることができます。 [元に戻す/やり直し] 結論 これで、Document Solutions JavaScript PDF ビューアの注釈、編集、フォーム フィールド機能について説明しました。ご覧のとおり、独自の注釈を追加したり、表示すべきでない情報を編集したり、フォーム フィールドを追加/編集してインタラクティブな PDF フォームを作成したりすることが非常に簡単になりました。