メインコンテンツへスキップ

JavaScriptライブラリを利用した手書きサインのPDFへのコピー

  • 更新

!++++

Ver.6　[ 機能を見る ] [ 機能設定を見る ]

!----

 

※Ver5のサンプルは用意しておりません。

 

このサンプルは、TALONの機能画面で外部JavaScriptライブラリを利用する方法を紹介しています。
1ページのPDFに対応した機能であり、複数ページのPDFには対応していません。

本デモ機能は、PCブラウザに加え、スマートデバイスオプションを用いたAndroidのChromeおよびiOSのSafariにも対応しています。

 

本デモ機能では、以下のライブラリを使用しています。

  • PDF.js：PDFの画面描画
  • PDF-LIB：PDFの編集

 

詳細は、以下の公式サイトをご参照ください。

1. PDF.js 公式サイト(https://github.com/mozilla/pdf.js)
2. PDF-LIB 公式サイト(https://pdf-lib.js.org/)

 

なお、この画面で使用するライブラリ以外でも、基本的に同じ方法で他のライブラリを利用することが可能です。

 

設定方法

  1. 設定画面 > アプリケーション
    署名を手書き入力するための単票ブロックを作成します。
    ・「処理権限」に「登録」を付与します。
    ・署名画像データを格納するための HIDDEN 項目 と、署名を手書き入力するためのエリアとなる 入力項目 を作成します。

     

  2. 設定画面 > アプリケーション
    署名入りPDFを表示するための単票ブロックを作成します。
    ・「処理権限」に「登録」と「更新」を付与します。
    ・PDFを識別するための ID 項目 と、画像アップロード機能を持つ ファイル設定項目 を作成します。

  3. 設定画面 > アプリケーション > CSS
    必要なライブラリを読み込みます。

  4. 設定画面 > アプリケーション > Client-side JavaScript
    ライブラリを操作するための処理を実装します。
    ※署名欄に表示される各種機能の実行ボタンは、「Client-side JavaScript」にて動的に生成しています。

     

使用方法

  1. 「署名」欄に手書きでサインを入力します。
  2. 「PDFにコピー」ボタンを押すと、手書きのサインがPDFにコピーされます。
  3. 「ダウンロード」ボタンを押すと、PDFをダウンロードすることができます。
  4. 「ファイルセット」ボタンを押してPDFをファイルの入力フィールドに指定し、「確定」ボタンを押すとアップロードされます。
  5. 「クリア」ボタンを押すと、「署名」欄の入力がリセットされます。

 

画面イメージ

  • 手書きサイン入力のイメージ

handwriting.png

 

  • PDFへサインがコピーされたイメージ

copy.png

 

  • PDFのダウンロードイメージ

download.png

 

  • PDFのアップロードイメージ

upload.png

 

  • 「署名」欄の入力リセットイメージ

clear.png

 

!++++

関連マニュアル一覧

!----