4,088 測定値

Foxit PDF SDK for Webを使用してカスタムフォームフィールドを作成するためのガイド

に Foxit Software8m2023/11/17

長すぎる; 読むには

このチュートリアルでは、Foxit PDF Library for Webを使用してWebブラウザのPDFドキュメントにカスタムフォームフィールドを作成する方法を説明します。

featured image - Foxit PDF SDK for Webを使用してカスタムフォームフィールドを作成するためのガイド

PDF 形式は、さまざまな種類のドキュメントに対する多用途のソリューションとして機能し、最新のソフトウェアに不可欠なものとなっています。安全で編集可能でユーザーフレンドリーな PDF を求める企業にとって、 Foxit は貴重な選択肢として浮上しています。 Foxit の PDF SDK ライブラリは、さまざまな業界に対応する豊富な機能を誇ります。

特に、Web ブラウザベースの PDF は、文書管理において無数のアプリケーションに使用されます。これらは多くの銀行システムで重要な役割を果たし、月次明細の作成などのタスクを容易にします。さらに、コンプライアンス業界は、安全なデータ収集と保管のために Web ベースの PDF に依存しています。

このチュートリアルでは、Foxit PDF SDK for Web を活用して、Web ブラウザーの PDF ドキュメント内にカスタマイズされたフォームフィールドを作成する方法を説明します。付属のGitHub リポジトリを使用すると、チュートリアルで概説されている手順に従って実装することができます。

Foxit PDF SDK for Webとは何ですか?

Foxit PDF SDK for Web は、Foxit が提供する多様な PDF SDK の中でも、Foxit のレンダリングエンジンの利点を活用した包括的な PDF ライブラリとして際立っています。この SDK を使用すると、包括的で完全にカスタマイズ可能な PDF ビューアをアプリケーションにシームレスに統合できます。

Foxit の SDK で作成された Web PDF を使用すると、ユーザーは JavaScript を使用してモバイルまたはデスクトップのブラウザから直接、さまざまな言語でドキュメントを簡単に表示、記入、注釈付け、署名できます。 SDK は、Firefox、Safari、Chrome、Opera などのすべての主要なブラウザと互換性があります。

機能を説明するために、Foxit PDF SDK for Web を使用して必要な構造を提供し、テンプレートから新しい PDF プロジェクトの作成に着手します。この実践的なアプローチでは、SDK が Web ベースのプロジェクト内で PDF 機能をどのように強化するかを実際にデモンストレーションします。

Foxit PDF SDK for Webの実装

Web 用 Foxit PDF SDKをダウンロードします。 ZIP ファイルには、SDK、ドキュメント、サンプルが含まれている必要があります。

解凍したディレクトリから HTTP サーバーを実行すると、これらの例をプレビューできます。

 # NPX available with NPM v5.2 or newer npx http-server

プロジェクトのセットアップ

このチュートリアルでは、フロントエンドツールにViteを使用します。 ES モジュール (ESM) に基づいており、高速で、すぐに SDK を使用するために必要なものがすべて付属しています。テンプレートから新しいプロジェクトを作成し、開発サーバーを起動するには、Node.js バージョン 12.2.0 以降を入手していることを確認し、次のコマンドを実行します。

 npm create vite@latest project -- --template vanilla cd project npm install npm run dev

作成したディレクトリにSDKを移動します。このチュートリアルの残りの部分では、SDK は親プロジェクトディレクトリに相対的な./FoxitPDFSDKForWebで利用できるものと想定されます。

PDFの読み込み

実験を始めるには、ドキュメントがアップロードされた PDF ビューアが必要です。 PDF ビューアを初期化するには、まず HTML 構造を作成し、SDK をロードします。

 <!-- index.html --> <!-- ... --> <body> <div class="container"> <div id="viewer"></div> <div id="menu"></div> </div> <script src="./FoxitPDFSDKForWeb/lib/PDFViewCtrl.full.js"></script> <script type="module" src="/main.js"></script> </body> <!-- ... -->

さらに、 style.cssに、要素のスタイルを設定するための CSS を追加します。

 /* style.css */ html { height: 100%; }b ody { height: 100%; margin: 0; }. container { width: 100%; height: 100%; display: flex; }# viewer { height: 100%; flex: 1; overflow: auto; }# menu { width: 10rem; }. menu-element { background: #f1f5f9; padding: 1rem; display: flex; justify-content: center; align-items: center;font-family: monospace; margin: 0.5rem; }

main.js内で、SDK を使用してpdfViewerのインスタンスを作成します。

 import "./style.css"; const licenseSN = "..."; const licenseKey = "..."; const viewerContainer = document.getElementById("viewer"); const pdfViewer = new PDFViewCtrl.PDFViewer({ libPath: "./FoxitPDFSDKForWeb/lib", jr: { licenseSN, licenseKey, }, customs: { ScrollWrap: PDFViewCtrl.CustomScrollWrap.create(viewerContainer), }, });

LicenseSNとLicenseKeyの値は./FoxitPDFSDKForWeb/examples/license-key.jsファイル内で見つけることができます。

pdfViewer は、以下を含む構成オブジェクトをコンストラクターに提供することによって作成されます。

libPath:解凍された SDK パッケージのlibフォルダーへの相対パス
jr:最も重要なライセンス情報を含む JR エンジンの設定オプション
Customs.ScrollWrap: PDF のサイズ変更とスクロールを制御するカスタムコンポーネント。これを設定するとビューアがコンテナに合わせて調整されます。

pdfViewerが作成されたら、それを初期化してドキュメントをロードするだけです。

 // ... const loadPDF = async (url) => { const response = await fetch(url); const blob = await response.blob();return pdfViewer.openPDFByFile(blob); }; pdfViewer.init(viewerContainer); loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf");

上記のスニペットは、PDF ファイルをBLOBとしてフェッチし、 openPDFByFile()メソッドを使用してビューアで開きます。使用される PDF ドキュメントは、SDK に含まれるドキュメントのデモガイドです。

右側の追加スペースは、ドラッグ可能なフォームフィールドのメニューとして機能します。

カスタムフォームフィールドの作成

Foxit SDK でフォームフィールドを作成するために必要なのは、ビューア、フォームフィールドのメタデータ (フィールドタイプや選択オプションなど)、およびフォームフィールドの位置だけです。この例では、ユーザーがビューアにドラッグアンドドロップできるメタデータを含む事前定義されたフォームフィールドのセットを作成します。

メタデータの定義

まず、許可されたフィールドのメタデータと追加のヘルパーを定義します。

 // ... const menuContainer = document.getElementById("menu"); const randomId = () => `_${Math.random().toString(36).substring(2, 9)}`; const FieldTypes = PDFViewCtrl.PDF.form.constant.Field_Type; const formFields = [ { label: "Push Button", name: "push-button", type: FieldTypes.PushButton, width: 50, height: 30, }, { label: "Checkbox", name: "checkbox", type: FieldTypes.CheckBox, width: 50,height: 30, }, { label: "Radio Button", name: "radio-button", type: FieldTypes.RadioButton, width: 80, height: 30, }, { label: "Combo Box", name: "combo-box", type: FieldTypes.ComboBox, width: 60, height: 30, }, { label: "List Box", name: "list-box", type: FieldTypes.ListBox, width: 60, height: 100, }, { label: "Text", name: "text", type: FieldTypes.Text, width: 60, height: 30, }, ]; const comboBoxOptions = [ { label: "10", value: "10", selected: true, defaultSelected: true }, { label: "20", value: "20", selected: false, defaultSelected: false }, { label: "30", value: "30", selected: false, defaultSelected: false }, { label: "40", value: "40", selected: false, defaultSelected: false }, ]; const listBoxOptions = comboBoxOptions;

randomId()関数は、ドキュメント内のフォームフィールドを識別するための ID を生成します。 FieldTypes は、 SDK で使用可能な事前定義されたフィールドタイプをより迅速に参照するためのショートカットです。各フォームフィールドのエントリには次のものが含まれます。

ユーザーに使用方法を知らせるラベル
ドラッグされた要素をメタデータエントリに一致させるための名前
フィールドのタイプを示すタイプ
PDF 内の位置四角形を計算するための幅とheight

最後に、comboBoxOptions と listBoxOptions には、ユーザーがいずれかを選択する必要があるフィールドのサンプルオプションが含まれています。

ドラッグアンドドロップ要素の作成

メタデータの準備ができたら、ドラッグアンドドロップのロジックとフォームフィールドの配置を処理する関数を作成できます。

 // ... const loadFormFieldsMenu = async (PDFDoc) => { const PDFForm = await PDFDoc.loadPDFForm(); formFields.forEach((formField) => { const element = document.createElement("div"); element.draggable = true; element.id = formField.name; element.classList.add("menu-element"); element.textContent = formField.label; element.addEventListener("dragstart", (event) => { event.dataTransfer.setData("text/plain", event.target.id); }); menuContainer.append(element); }); };

この関数は、PDF ドキュメントを表す SDK オブジェクトであるPDFDoc を引数として受け入れます。これは、フォームフィールドがドラッグ可能な要素に処理されてサイドメニューに追加された後、フォームフィールドの追加と構成に使用されるPDFFormオブジェクトを取得するために使用されます。

各要素には、ドラッグを可能にするためにtrueに設定されたdraggable属性と、基になるメタデータと照合するために各フォームフィールドの一意の名前に対応するID があります。このID は、後でドラッグアンドドロップアクション中に転送するために、 dragstartイベントリスナー内で使用されます。

loadFormFieldsMenu()関数に必要なPDFDocパラメータを取得するには、次のように変更して、 loadPDF()関数の結果のPromiseを取得する必要があります。

 // ... loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf").then( (PDFDoc) => { loadFormFieldsMenu(PDFDoc); } );

メニュー項目が作成されると、アプリは次のようになります。

ドラッグ＆ドロップ機能の実装

ドラッグ可能な要素を作成したら、ドラッグアンドドロップ機能を完全に実装し、ビューアでフォームフィールドを作成できるようにします。

 // ... const loadFormFieldsMenu = async (PDFDoc) => { // ... viewerContainer.addEventListener("dragover", (event) => { event.preventDefault(); }); viewerContainer.addEventListener("drop", async (event) => { event.preventDefault(); const droppedFormFieldName = event.dataTransfer.getData("text/plain"); const formField = formFields.find( ({ name }) => name === droppedFormFieldName ); const pos = await pdfViewer.convertClientCoordToPDFCoord({ clientX: event.clientX, clientY: event.clientY, }); const id = randomId();await PDFForm.addControl(pos.index, id, formField.type, { left: pos.left - formField.width / 2, right: pos.left + formField.width / 2, top: pos.top + formField.height / 2, bottom: pos.top - formField.height / 2, }); const field = PDFForm.getField(id); if (formField.type === FieldTypes.ComboBox) { field.setOptions(comboBoxOptions); } else if (formField.type === FieldTypes.ListBox) { field.setOptions(listBoxOptions); } }); }; // ...

上記のコードでは、ドラッグオーバーイベントリスナーは、 PreventDefault()を呼び出すことによって、ドロップイベントで処理されるインタラクションを転送します。

ドロップイベントハンドラー内では、まず、ドラッグされた要素のデータを使用して、一致するメタデータが取得されます。次に、 pdfViewerインスタンスで使用できるConvertClientCoordToPDFCoord()メソッドを使用して、イベントからのマウス位置が PDF 座標に変換されます。

位置、メタデータ、およびランダムに生成された ID は、関数の前半で作成されたPDFFormオブジェクトからのaddControl()メソッド呼び出しで使用されます。このメソッドは次の引数を受け取ります。

フォームフィールドを配置するページのインデックス ( convertClientCoordToPDFCoord()呼び出しから取得)
新しく作成されたフォームフィールドに対してランダムに生成された ID
提供された定数 (メタデータから取得) に従ったフォームフィールドのタイプ
マウス座標をフォームフィールドの中心にするために幅と高さを使用して計算された、四角形のフォームフィールドの配置を定義する引数。

最後に、フィールドがオプションのリストを受け入れる場合、最初に ID を使用してPDFFormオブジェクトのgetField()メソッドによってアクセスされます。オプションは、 setOptions()メソッドを使用して適切に設定されます。

いくつかのフォームフィールドがすでに配置されている最終的なアプリは次のようになります。

結論

PDF に機能を追加すると、組織とユーザーに大きなメリットがもたらされます。電子的な更新と署名により、時間、お金、労力が節約され、カスタマイズされた安全な文書により会社への信頼が高まります。

前に示したように、 Foxit の多言語 PDF ツールは Foxit PDF SDK for Web と組み合わせることで、堅牢なソリューションを提供します。カスタムフォームフィールドを作成し、ドラッグアンドドロップ機能を実装し、さまざまな機能のロックを解除できます。ただし、これは氷山の一角にすぎません。 Foxit PDF SDK for Web は、PDF 機能をさらに強化するための包括的な機能セットを提供します。

可能性をさらに詳しく調べるには、公式ドキュメントと SDK によって提供される追加リソースを参照してください。このドキュメントでは、高度な機能、カスタマイズオプション、ベストプラクティスについて説明します。

チュートリアルを確認したり、作業内容を確認したりする場合は、チュートリアルに関連付けられているGitHub リポジトリを参照できます。リポジトリには、チュートリアルで説明されている概念を理解して実装するのに役立つソースコード、例、追加資料が含まれている可能性があります。