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 の中でも、Foxit のレンダリング エンジンの利点を活用した包括的な PDF ライブラリとして際立っています。この SDK を使用すると、包括的で完全にカスタマイズ可能な PDF ビューアをアプリケーションにシームレスに統合できます。 Foxit PDF SDK for Web は  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 プロジェクトのセットアップ このチュートリアルでは、フロントエンド ツールに を使用します。 ES モジュール (ESM) に基づいており、高速で、すぐに SDK を使用するために必要なものがすべて付属しています。テンプレートから新しいプロジェクトを作成し、開発サーバーを起動するには、Node.js バージョン 12.2.0 以降を入手していることを確認し、次のコマンドを実行します。 Vite   npm create vite@latest project -- --template vanilla cd project npm install npm run dev 作成したディレクトリにSDKを移動します。このチュートリアルの残りの部分では、SDK は親 ディレクトリに相対的な で利用できるものと想定されます。 プロジェクト ./FoxitPDFSDKForWeb   PDFの読み込み 実験を始めるには、ドキュメントがアップロードされた PDF ビューアが必要です。 PDF ビューアを初期化するには、まず HTML 構造を作成し、SDK をロードします。     <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>  さらに、  に、要素のスタイルを設定するための CSS を追加します。 style.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; }   内で、SDK を使用して のインスタンスを作成します。 main.js 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 は、以下を含む構成オブジェクトをコンストラクターに提供することによって作成されます。   解凍された SDK パッケージの フォルダーへの相対パス libPath: lib 最も重要なライセンス情報を含む JR エンジンの設定オプション jr:  PDF のサイズ変更とスクロールを制御するカスタム コンポーネント。これを設定するとビューアがコンテナに合わせて調整されます。 Customs.ScrollWrap:   が作成されたら、それを初期化してドキュメントをロードするだけです。 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 ファイルを としてフェッチし、  メソッドを使用してビューアで開きます。使用される PDF ドキュメントは、SDK に含まれるドキュメントのデモ ガイドです。  BLOB openPDFByFile() 右側の追加スペースは、ドラッグ可能なフォーム フィールドのメニューとして機能します。 カスタムフォームフィールドの作成 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;   関数は、ドキュメント内のフォーム フィールドを識別するための ID を生成します。   SDK で使用可能な事前定義されたフィールド タイプをより迅速に参照するためのショートカットです。各フォームフィールドのエントリには次のものが含まれます。 randomId() FieldTypes は、 ユーザーに使用方法を知らせる ラベル ドラッグされた要素をメタデータ エントリに一致させるための 名前 フィールドのタイプを示す タイプ 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() ドロップ イベント ハンドラー内では、まず、ドラッグされた要素のデータを使用して、一致するメタデータが取得されます。次に、  インスタンスで使用できる メソッドを使用して、イベントからのマウス位置が PDF 座標に変換されます。 ドロップ pdfViewer ConvertClientCoordToPDFCoord() 位置、メタデータ、およびランダムに生成された ID は、関数の前半で作成された オブジェクトからの メソッド呼び出しで使用されます。このメソッドは次の引数を受け取ります。 PDFForm addControl() フォームフィールドを配置するページのインデックス (  呼び出しから取得) convertClientCoordToPDFCoord() 新しく作成されたフォームフィールドに対してランダムに生成された ID 提供された定数 (メタデータから取得) に従ったフォーム フィールドのタイプ マウス座標をフォーム フィールドの中心にするために と を使用して計算された、四角形のフォーム フィールドの配置を定義する引数。 幅 高さ 最後に、フィールドがオプションのリストを受け入れる場合、最初に ID を使用して オブジェクトの メソッドによってアクセスされます。オプションは、  メソッドを使用して適切に設定されます。 PDFForm getField() setOptions() いくつかのフォーム フィールドがすでに配置されている最終的なアプリは次のようになります。  結論 PDF に機能を追加すると、組織とユーザーに大きなメリットがもたらされます。電子的な更新と署名により、時間、お金、労力が節約され、カスタマイズされた安全な文書により会社への信頼が高まります。 前に示したように、  多言語 PDF ツールは Foxit PDF SDK for Web と組み合わせることで、堅牢なソリューションを提供します。カスタム フォーム フィールドを作成し、ドラッグ アンド ドロップ機能を実装し、さまざまな機能のロックを解除できます。ただし、これは氷山の一角にすぎません。 Foxit PDF SDK for Web は、PDF 機能をさらに強化するための包括的な機能セットを提供します。 Foxit の 可能性をさらに詳しく調べるには、 と SDK によって提供される追加リソースを参照してください。このドキュメントでは、高度な機能、カスタマイズ オプション、ベスト プラクティスについて説明します。 公式ドキュメント チュートリアルを確認したり、作業内容を確認したりする場合は、チュートリアルに関連付けられている を参照できます。リポジトリには、チュートリアルで説明されている概念を理解して実装するのに役立つソース コード、例、追加資料が含まれている可能性があります。 GitHub リポジトリ   でも公開されています。 ここ

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Free Trial

Now Hiring

このオーディオは、ストーリーの元の言語で制作されています。

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

About Author

コメント

ラベル

この記事は

Related Stories

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

HackerNoon ライティングコンテストで優勝したいですか? #crypto-api コンテスト優勝者のおすすめはこちら

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

暗号通貨の成長: 効果的なユーザーペルソナの作成

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

HackerNoon ライティングコンテストで優勝したいですか? #crypto-api コンテスト優勝者のおすすめはこちら

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

暗号通貨の成長: 効果的なユーザーペルソナの作成

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps